angular2

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

模块
Angular 应用是由模块化的，它有自己的模块系统：NgModules；每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule；Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。

几个重要的属性如下：
1.declarations：模块内部Components/Directives/Pipes的列表，声明一下这个模块内部成员

2.providers：指定应用程序的根级别需要使用的service。（Angular2中没有模块级别的service，所有在NgModule中声明的
Provider都是注册在根级别的Dependency Injector中）

3.imports：导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比
如导入CommonModule后就可以使用NgIf、NgFor等指令。

4.exports：用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴
露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。

5.bootstrap：通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。

6.entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用，一般是bootstrap组件或者路由组
件，ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中，否则不会用到这个属性。

简单的根模块：
app/app.module.ts 文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

接下来我们通过引导根模块来启动应用，开发过程通常在 main.ts 文件中来引导 AppModule ，代码如下：
app/main.ts 文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

组件(Components)、模板(Templates)、
组件：
组件是一个模板的控制类用于处理应用和逻辑页面的视图部分
创建 Angular 组件的方法有三步：
1.从 @angular/core 中引入 Component 修饰器
2.建立一个普通的类，并用 @Component 修饰它
3.在 @Component 中，设置 selector 自定义标签，以及 template 模板
模板：
Angular模板的默认语言就是HTML；我们可以通过使用模板来定义组件的视图来告诉 Angular 如何显示组件。
app/components.ts 文件：

@Component({
   selector : 'mylist',
   template : 'app.mylist.html'
   directives : [ComponentDetails]
})
export class ListComponent{...}

@Component 中的配置项说明：
selector - 一个 css 选择器，它告诉 Angular 在 父级 HTML 中寻找一个 标签，然后创建该组件，并插入此标签中
templateUrl - 组件 HTML 模板的地址
directives - 一个数组，包含 此 模板需要依赖的组件或指令

元数据(Metadata)、数据绑定(Data binding)
元数据：
元数据告诉 Angular 如何处理一个类；在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。
数据绑定：
数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，它是管理应用程序里面数值的一种机制；通过这种机制，可以从HTML里面取值和赋值，使得数据的读写，数据的持久化操作变得更加简单快捷
1.插值 : 在 HTML 标签中显示组件值

<h3>{{list}}<h3>

2.属性绑定: 把元素的属性设置为组件中属性的值

<img [src]="userImageUrl">

3.事件绑定: 在组件方法名被点击时触发

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

4.双向数据绑定，使用Angular里的NgModel指令可以更便捷的进行双向绑定

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

指令（Directives）
指令是一个带有"指令元数据"的类；在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>