模塊
模塊就是提供相對獨立功能的功能塊,每一塊聚焦一個聚焦一個特定業(yè)務領域。
模塊的主要功能是導出一系列的類,函數和值供其他模塊導入。
模塊文件中的基本概念:
- @NgModule裝飾器
- 裝飾器修飾下的元數據概念
- imports
- declarations
- exports
- providers
- bootstrap
@NgModule裝飾器
用來為模塊定義元數據。
imports
導入本模塊中使用的其他模塊
declarations
聲明當前模塊中使用的組件,管道和指令列表等,包括在本模塊定義的和外部引入的。
exports
導出公共部分提供給其他模塊使用
providers
提供了當前模塊所使用的服務提供商
bootstrap
指明哪個組件為引導組件
組件
組件文件的結構如下:
impport {Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First App</h1>'
})
export class AppComponent{ }
@Component
該裝飾器會把一份元數據關聯到根組件類上。
selector
為代表該組件的html元素指定簡單的CSS選擇器。
template
指定該組件如何渲染組件視圖
雙向數據綁定
如果我們希望在組件內對數據進行操作后再反饋到界面怎么處理呢?Angular2提供了一個雙向數據綁定的機制。這個機制是這樣的,在組件中提供成員數據變量,然后在模板中引用這個數據變量。
雙向綁定后,我們通過數據成員變量就可以知道用戶名和密碼了,不需要在傳遞參數了。而成員變量的引用方式是this.成員變量。
服務
@Injectable()
當 TypeScript 看到@Injectable()裝飾器時,就會記下本服務的元數據。如果 Angular 需要往這個服務中注入其它依賴,就會使用這些元數據。
路由/導航
路由是導航的另一個名字。路由器就是從一個視圖導航到另一個視圖的機制。
Angular的路由器是一個可選的外部Angular NgModule,名叫RouterModule。路由器包含了多種服務,多種指令(RouterOutlet,RouterLink,RouterLinkActive)和一套配置(Routes)。