Angular 2 之一 系统架构

Angular 2系统架构图

Angular 2系统架构中组件是最核心的概念，组件由元数据（Metadata）、组件类（Component）和模板（Template）组成，其中：

  • 元数据描述组件的属性
  • 组件类实现组件的功能，可调用依赖注入（Dependent Injection）的服务（Service）
  • 模板定义组件的视图（View），其中包括HTML元素（element）、其他组件和/或Directive。

组件类和模板通过数据绑定关联：通过属性绑定（Perperty Binding）在模板视图中显示属性值，用户操作模板视图触发事件通过事件绑定（Event Binding）回调组件的事件处理函数。 注意：系统架构仅包括Angular 2核心，可选的路由、HTTP服务未包括在内。

组件 Component

@Component({
   selector: "increase",
   template: `
     <div class="myborder">
       <div>数值是: {{value}}</div>
     </div>`,
   providers: [ CalcService ],
   directives: [],
   pipes: [],
   styles: [ ".myborder { border: 1px solid; }" ]
})
export class Increase { ... }

 

其中：

  • selector：CSS selector，对组件一般是元素名称
  • template：组件视图模板
  • providers：组件级依赖注入的服务列表
  • directives：模板可使用的其他组件和Directive
  • 模板可使用的Pipe列表
  • 本组件使用的CSS样式表。

组件类class定义组件组件功能，如：

export class Increase {
  @Input() value: number;
  @Output() changed: EventEmitter<string> = new EventEmitter();

  constructor(private calc: CalcService) {
  }

  private onIncrease(event: any) {
    this.value = this.calc.increase(this.value);
    this.changed.next(`数值增加到${this.value}`);
  }
}

 

其中：

  • @Input声明输入的属性绑定成员字段
  • @Output声明输出的事件绑定成员字段
  • 构造函数通过参数类型CalcService自动注入服务实例，并由TypeScript自动赋值给私有的this.calc成员字段
  • 在事件绑定的处理函数中，可以调用依赖注入的服务，并更新成员变量值。成员变量值更新后，由Angular 2的变更检测自动更新到视图中
  • this.changed.next ()向父组件输出事件，事件参数是字符串。

元数据 Metadata

元数据告诉Angular 2如何处理类。如@Component是采用TypeScript标注（ decorator）方式表示的组件配置信息。TypeScript标注是一个函数，将组件配置信息转换为附加在类定义上的元数据，Angular 2在运行时根据元数据创建和显示组件实例。

其他常用的元数据包括@Injectable、@Input、@Output、@RouteConfig等。

数据绑定 Data Binding

应用程序需要在DOM中显示内容，也需要响应用户操作。Angular 2通过以下四种数据绑定机制关联组件模板和组件类：数据绑定

  • 在DOM中显示表达式的值
  • 通过属性绑定输入参数，在DOM中显示
  • 通过事件绑定处理逻辑，由DOM事件触发
  • 双向绑定，一般用于表单。

依赖注入 Dependency Injection

Angular 2使用依赖注入向类注入服务实例，以及服务实例所有的依赖实例。Angular 2采用构造注入，一般地根据构造函数的参数类型确定注入实例。

Angular 2可以在bootstrap函数注册全局provider，或者在组件定义时注册组件级provider。如下图所示，注册之后在创建组件时能通过Injector获取对应的服务实例。依赖注入

Directive

Angular 2模板根据directive指令动态生成DOM。

Directive是使用@Directive标注的类，分为结构型（structural）和属性型（attribute）。系统预定义的结构型Directive包括ngIf、ngFor和ngSwitch，属性型Directive包括ngClass、ngStyle等。Directive可以自定义。

服务 Service

Angular 2对服务没有特殊定义；一般地，任何独立的功能均可定义为服务。

服务主要被组件调用，组件通过依赖注入使用服务。一个定义良好的组件一般地仅处理输入属性和事件回调，其他功能均可封装为服务。

学习资源

posted @ 2016-05-02 20:31  weisp  阅读(340)  评论(0)    收藏  举报