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

数据绑定(Data binding)

数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，它是管理应用程序里面数值的一种机制

通过这种机制，可以从HTML里面取值和赋值，使得数据的读写，数据的持久化操作变得更加简单快捷

数据绑定的方法

如下图所示， 数据绑定的语法有四种形式

每种形式都有一个方向——从 DOM 来、到 DOM 去、双向，就像图中的箭头所示意的

1. 插值

   在 HTML 标签中显示组件值

   <h3>
   {{title}}
   <img src="{{ImageUrl}}">
   </h3>
   

2. 属性绑定

   把元素的属性设置为组件中属性的值

   <img [src]="userImageUrl">
   

3. 事件绑定

   在组件方法名被点击时触发

   <button (click)="onSave()">保存</button>
   

4. 双向绑

   使用 AngularJS 里的 NgModel 指令可以更便捷的进行双向绑定

   <input [value]="currentUser.firstName" (input)="currentUser.firstName=$event.target.value" >