2.1 基本構造
angularjs主要有8個構造快：
模塊（module）
組件（component）
模板（template）
元數據（metadata）
數據綁定（data binding）
指令（directive）
服務（service）
依賴注入（dependency injection）
2.1.1 模塊（module）
每個 Angular 應用至少有一個模塊（根模塊），習慣上命名為AppModule。Angular 模塊（無論是根模塊還是特性模塊）都是一個帶有@NgModule裝飾器的類。裝飾器是用來修飾 JavaScript 類的函數。
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 { }
NgModule的主要屬性如下:
imports :
導入其他module,其他module暴露出來的Component Directives Pipes等都可以在本mudole的組件被使用。比如導入CommonModule后就可以后就可以使用NgIf NgFor等指令。
declarations:
模塊內部Components Directives Pipes的列表，聲明一下這個模塊的內部成員。
providers:
指令應用程序的根級別需要使用的service.(ng2中沒有模塊級別的service,所有在NgModule中聲明的Provider都是注冊在根級別的Dependency Injector中)
bootstrap:固定寫法，略.
exports:
用來控制將哪些內部成員暴露給外部使用。導入一個module並不意味着會自動導入這個module內部所暴露的公共成員。除非導入的這個module把它內部導入的module寫到exports中。
2.1.2 元數據（metadata)
元數據告訴 Angular 如何處理一個類。
在TypeScript 中，我們用裝飾器 (decorator) 來附加元數據。 下面就是HeroListComponent的一些元數據。
@Component({
moduleId: module.id, selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ }
@Component裝飾器能接受一個配置對象， Angular 會基於這些信息創建和展示組件及其視圖。
@Component的配置項包括：
moduleId: 為與模塊相關的 URL（例如templateUrl）提供基地址。
selector: CSS 選擇器，它告訴 Angular 在父級 HTML 中查找<hero-list>標簽，創建並插入該組件。
templateUrl: 組件 HTML 模板的模塊相對地址
providers: 組件所需服務的依賴注入提供商數組。 這是在告訴 Angular：該組件的構造函數需要一個HeroService服務，這樣組件就可以可以調用該服務了。
2.1.3 數據綁定（data binding)
<li>{{hero.name}}</li> <hero-detail [hidden]="selectedHero"></hero-detail> <li (click)="selectHero(hero)"></li> <input [(ngModel)]="hero.name">
-
{{hero.name}}[插值表達式]在<li>標簽中顯示組件的hero.name屬性的值。 -
[hidden][屬性綁定] 把父組件的selectedHero的值傳到子組件的hidden屬性中。 -
(click)[事件綁定]在用戶點擊英雄的名字時調用組件的selectHero方法。
-
[(ngModel)]雙向數據綁定是重要的第四種綁定形式，它使用ngModel指令組合了屬性綁定和事件綁定的功能。在雙向綁定中，數據屬性值通過屬性綁定從組件流到輸入框。用戶的修改通過事件綁定流回組件，把屬性值設置為最新的值。
2.1.4 依賴注入
依賴注入”是提供類的新實例的一種方式，還負責處理好類所需的全部依賴。大多數依賴都是服務。
constructor(private service: HeroService) { }
angularjs2 通過構造函數實現注入，和java里面的注入的方式之一借助構造函數實現依賴是一樣的