模組（ngModule）
一個ngModule就是一個容器，用於存放一些元件，服務或其他程式碼檔案，作用是提供一個編譯上下文環境。
@NgModule({
declarations: [],//可宣告物件表
imports: [],//匯入表
exports:[],//匯出表
providers: [],//服務
bootstrap: []//主檢視
})
複製程式碼它也可以匯入其它模組的功能，匯出一些功能供其它模組使用。
import {Component} from '@angular/core';//從@angular/core庫匯入Component裝飾器
export class AppModule { }//匯出模組
複製程式碼元件(component)
元件控制螢幕上被稱為檢視的一小塊區域。元件扮演著控制器和檢視的角色，模板則扮演檢視的角色。作用是通過在類中定義元件的屬性方法與檢視互動。
//dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import {Hero} from '../hero';
import {HeroService} from '../hero.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
heroes:Hero[];
constructor(private heroService:HeroService) { }
ngOnInit() {
this.getHoures()
}
getHoures():void{
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes.slice(1,5))
}
}
複製程式碼//dashboard.component.html
<h2>Top Heroes!</h2>
<div class="grid grid-pad">
<a *ngFor='let hero of heroes' class='col-1-4' routerLink = '/detail/{{hero.id}}'>
<div class='module hero'>
<h4>{{hero.name}}</h4>
</div>
</a>
</div>
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
複製程式碼模板語法
a.資料繫結
- {{hero.name}}插值表示式
- [hero]屬性繫結；
- (click)事件繫結；
- [(ngModel)]雙向資料繫結
b.管道
@pipe可以自定義，也可以用Angular自帶的管道，用來在模板中宣告顯示值的轉換邏輯，相當於filter。在html中用管道操作符|。比如
{{interpolated_value | pipe_name}}
複製程式碼c.指令
模板可以根據指令對dom進行轉換，元件其實也是指令，是一個帶有@directive裝飾器的類。
結構型指令
<li *ngFor="let hero of heroes"></li>
複製程式碼屬性型指令
<input [(ngModel)]="hero.name">
複製程式碼服務與依賴注入
狹義的服務是一個明確定義了用途的類。Angular把元件和服務分開，元件只負責資料繫結的屬性和方法，元件不負責從伺服器獲取資料、驗證使用者輸入、寫日誌，這是服務要做的，然後注入到任意元件。
@Injectable({
providedIn: 'root'
})
export class HeroService {
getHeroes ():Observable<Hero[]>{
this.messageService.add('HeroService:fetched heroes')
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
tap(heroes => this.log(`fetched heroes`)),
catchError(this.handleError('getHeroes',[]))
)
};
constructor(
private http:HttpClient,
private messageService:MessageService
) { }
}
複製程式碼依賴注入（DI） 要用任何類都必須用注入器註冊一個提供商，以便註冊器可以使用它來建立新例項。注入器是主要的機制，不用自己建立。