AngularJS2

AngularJS2

Angular 1.x 的升级版本，性能上得到显著的提高，能很好的支持 Web 开发组件。
AngularJS2 发布于2016年9月份，它是基于ES6来开发的。

目前各种环境（浏览器或 Node）暂不支持ES6的代码，所以需要一些shim和polyfill（IE需要）让ES6写的代码能够转化为ES5形式并可以正常运行在浏览器中
web app 软件架构

                   Web App
     Angular2                  es6 browswer
     systemjs
traceur  es6-module-loader
     es5 browser

Es5 浏览器下需要以下模块加载器：
systemjs - 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载。
es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块。
traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5代码，systemjs会自动加载 这个模块。

架构:
Angular 2 应用程序主要由以下 8 个部分组成：
1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services)
8、依赖注入 (Dependency Injection)

模板 (Templates)是由 Angular扩展的HTML语法组成
组件 (Components)类用来管理这些模板，应用逻辑部分通过服务
(Services — 实现特定功能，通过注入方式供其它模块使用的独立模块）来完成
模块 打包服务与组件，最后通过引导根模块来启动应用

模块：
Angular 应用是由模块化的，它有自己的模块系统：NgModules。
Angular 至少要有一个模块(即根模块)，一般可以命名为：AppModuleAngular
Angular 模块是一个带有 @NgModule 装饰器的类

组件：
组件是一个模板的控制类，用于处理应用和逻辑页面的视图部分。
组件是构成 Angular 应用的基础和核心，可用于整个应用程序中。
组件知道如何渲染自己及配置依赖注入。
组件通过一些由属性和方法组成的 API 与视图交互。
Angular 应用至少有一个根组件AppComponent

创建 Angular 组件的方法有三步：
从 @angular/core 中引入 Component 修饰器
建立一个普通的类，并用 @Component 修饰它
在 @Component 中，设置 selector 自定义标签，以及 template 模板

应用执行过程：
Angular调用bootstrapModule函数，读取AppModule的元数据，在启动组件中找到AppComponent并找到my-app选择器，
在HTML中定位到一个名字为my-app的标签元素，然后再这个标签之间的载入内容

数据绑定(Data binding)
显示数据以及数据交互，它是管理应用程序里面数值的一种机制

插值
在 HTML 标签中显示组件值

<img src="{{ImageUrl}}">

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

<img [src]="userImageUrl">

事件绑定
语法: 左侧小括号内的目标事件click和右侧引号中的模板声明onSave()组成

<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button> //前缀形式：on- 

双向数据绑定NgModel
[]实现了数据流从组件到模板，
()实现了数据流从模板到组件，两者一结合[()]就实现了双向绑定

<input [value]="current.Name"
       (input)="current.Name=$event.target.value" >
<input [(ngModel)]="current.Name">
<input bindon-ngModel="current.Name"> //前缀形式：bindon-

指令（Directives）
— 指令是一个带有”指令元数据”的类
Angular中包含三种类型的指令：
属性指令：
以元素的属性形式来使用的指令。
结构指令：
用来改变DOM树的结构
组件：
作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令。

css类绑定
包括一个 class 前缀，紧跟着一个点 (.) ，再跟着 CSS 类的名字组成。 其中后两部分是可选的。如： [class.class-name]
style样式绑定
包括一个style.，紧跟着css样式的属性名，如：[style.style-property]

Angular 的内置指令有 NgClass、NgStyle、NgIf、NgFor、NgForTrackBy、NgSwitch等

模板引用变量
模板引用变量是模板中对 DOM 元素或指令的引用
它能在原生 DOM 元素中使用，也能用于 Angular 组件——实际上，
它可以和任何自定义 Web 组件协同工作。

可以在同一元素、兄弟元素或任何子元素中引用模板引用变量

<!-- phone 引用了 input 元素，并将 `value` 传递给事件句柄 -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

<!-- fax 引用了 input 元素，并将  `value` 传递给事件句柄  -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>