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)来完成，然后在模块中打包服务与组件， 最后通过引导根模块来启动应用

组件(Components)

组件是一个模板的控制类用于处理应用和逻辑页面的视图部分

组件是构成 Angular 应用的基础和核心，可用于整个应用程序中

组件知道如何渲染自己及配置依赖注入

组件通过一些由属性和方法组成的 API 与视图交互

创建 Angular 组件的方法有三步：

1. 从 @angular/core 中引入 Component 修饰器
2. 建立一个普通的类，并用 @Component 修饰它
3. 在 @Component 中，设置 selector 自定义标签 ，以及 template 模板

组件一般保存在 [组件名].component.ts 文件中，比如下面的 AppComponent 组件

app.comonent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>我的第一个 AngularJS 2 TypeScript 应用</h1>'
})
export class AppComponent { }