Angular 2 应用程序应用主要由以下 8 个部分组成

1. 模块 (Modules)
2. 组件 (Components)
3. 模板 (Templates)
4. 元数据 (Metadata)
5. 数据绑定 (Data Binding)
6. 指令 (Directives)
7. 服务 (Services)
8. 依赖注入 (Dependency Injection)

下图展示了每个部分是如何相互工作的

图中

1. 模板 (Templates)是由 Angular 扩展的 HTML 语法组成

2. 组件 (Components)类用来管理这些模板

3. 应用逻辑部分通过服务 (Services)来完成，然后在模块中打包服务与组件， 最后通过引导根模块来启动应用

元数据(Metadata)

元数据告诉 Angular 如何处理一个类

假设我们有一个组件叫作 Component ，它是一个类，除非我们告诉 Angular 这是一个组件

我们可以把元数据附加到这个类上来告诉 Angular Component 是一个组件

TypeScript 使用 装饰器 (decorator) 来附加元数据

@Component({
   selector : 'mylist',
   template : '<h2>简单教程，简单编程</h2>'
   directives : [ComponentDetails]
})
export class ListComponent{...}

@Component 装饰器能接受一个配置对象，并把紧随其后的类标记成了组件类

AngularJS 会基于这些信息创建和展示组件及其视图

@Component 中的配置项说明

• selector

  一个 css 选择器，它告诉 Angular 在 父级 HTML 中寻找一个 <mylist> 标签，然后创建该组件，并插入此标签中

• templateUrl

  组件 HTML 模板的地址

• directives

  一个数组，包含此模板需要依赖的组件或指令

• providers

  一个数组，包含组件所依赖的服务所需要的依赖注入提供者