1. Angular 模塊引導
Angular沒有了類似AngularJS中的<body ng-app="my-app">這樣的引導指令了
通過顯示調用 bootstrap 函數，並傳入應用模塊的名字( AppComponent)來啟動應用。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ]}) export class AppModule { }
NgModule是一個裝飾器函數，它接收一個用來描述模塊屬性的元數據對象。其中最重要的屬性是：
-
declarations- 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令和管道。 -
exports- declarations 的子集，可用於其它模塊的組件模板。 -
imports- 將js引入的素材模塊或者組件模塊等，進行angular模塊化引用。 -
providers- 服務的創建者，並加入到全局服務列表中，可用於應用任何部分。 -
bootstrap- 指定應用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設置bootstrap屬性。
2.ngClass 表達式包含/排除css類
<div [ngClass]="{active: isActive}"> // 例子1
<div [ngClass]="{active: isActive,
shazam: isImportant}"> // 例子2
<div [class.active]="isActive"> // 例子3
在第一個例子中，如果isActive為真，則active類被應用到那個元素上。
還可以同時指定多個類，例如第二個例子。
Angular還有類綁定，它是單獨添加或移除一個類的好辦法，就像第三個例子中展示的。
3.click 事件
<button (click)="toggleImage()"> // 例子1
<button (click)="toggleImage($event)"> // 例子2
Angular中要使用事件綁定，把目標事件的名字放在圓括號中，並且使用等號右側引號中的模板語句對它賦值。 然后Angular為這個目標時間設置事件處理器。當事件被觸發時，這個處理器就會執行模板語句。
在第一個例子中，當用戶點擊此按鈕時，相關組件中的toggleImage()方法就被執行了。
第二個例子演示了如何傳入$event對象，它為組件提供了此事件的詳情。
4.Component裝飾器
@Component({ selector: 'movie-list', templateUrl: './movie-list.component.html', styleUrls: [ './movie-list.component.css' ], })
5.生命周期鈎子
生命周期鈎子其實就是生命周期函數，一般用在當我們調用服務獲取數據的時候去使用的，例如當service.ts中有一個獲取后台數據的接口，需要我們在組件構建到頁面后就去獲取后台數據。
有了生命周期函數，我們可以控制數據在什么時候去獲取最合適。
1 import { Directive, OnInit, OnDestroy } from '@angular/core'; 2 3 import { LoggerService } from './logger.service'; 4 5 let nextId = 1; 6 7 @Directive({selector: '[mySpy]'}) 8 export class SpyDirective implements OnInit, OnDestroy { 9 10 constructor(private logger: LoggerService) { } 11 12 ngOnInit() { this.logIt(`onInit`); } 13 14 ngOnDestroy() { this.logIt(`onDestroy`); } 15 16 private logIt(msg: string) { 17 this.logger.log(`Spy #${nextId++} ${msg}`); 18 } 19 }
使用生命周期鈎子的時候，需要注意的是:
1. export class SpyDirective implements OnInit, OnDestroy {...} // 需要的生命周期鈎子直接引入 implements 到后面即可，多個用逗號隔開;
2. 在 ngOnInit、ngOnDestroy... 等方法中執行 service 中的函數即可。