1. angular-cli
安裝（前提：安裝node，npm慨飘，配置npm 淘寶鏡像）
npm install -g @angular/cli
angular-cli 常用命令
ng new {projectName} //生成{projectName} 項(xiàng)目
ng g component {name} //新建{name}組件 默認(rèn)會(huì)新建{name}文件夾 里邊是組件四件套
ng g class {name} //新建類，多用于通用屬性申明
ng g service //新建service
ng g module //新建module
ng g module route //新建路由
……未完待續(xù)
ng serve --host --port --open --aot //自行研究
2. NgModule是一個(gè)裝飾器函數(shù)谱姓，它接收一個(gè)用來描述模塊屬性的元數(shù)據(jù)對象躯畴。
@NgModule({
declarations: [
- 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件误趴、指令和管道霹琼。
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent,
HeroSearchComponent
],
imports: [
- 本模塊聲明的組件模板需要的類所在的其它模塊。
BrowserModule,
FormsModule,
HttpClientModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
],
providers: [
-服務(wù)的創(chuàng)建者凉当，并加入到全局服務(wù)列表中枣申，可用于應(yīng)用任何部分。
HeroService
],
bootstrap: [
- 指定應(yīng)用的主視圖（稱為根組件）看杭，它是所有其它視圖的宿主忠藤。只有根模塊才能設(shè)置bootstrap屬性。
AppComponent
]
})
3. Component
@Component的配置
export class
屬性聲明楼雹，指定屬性類型
構(gòu)造函數(shù) constructor(){}
生命周期鉤子 ngOnInit
泛型
4. httpclient
es6: map then Promise
http.{get|post|put|delete} subscribe() catch() then()
Promise
Observable
5. 路由
先注意<base href="/">
定義路由組
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent }
];
export
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
導(dǎo)航 routerLink routerLinkActive
<nav>
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
路由出口
有了這份配置模孩，當(dāng)本應(yīng)用在瀏覽器中的URL變?yōu)閌/heroes`時(shí)，路由器就會(huì)匹配到`path`為`heroes`的贮缅，并在宿主視圖中的之后顯示`HeroListComponent`組件榨咐。
<router-outlet></router-outlet>
location 服務(wù)
<a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4"> 帶參數(shù)
在`ngOnInit()`生命周期鉤子中，我們從
ActivatedRoute服務(wù)的可觀察對象`params`中提取`id`參數(shù)谴供， 并且使用`HeroService`來獲取具有這個(gè)`id`的英雄數(shù)據(jù)
ngOnInit(): void {
this.route.paramMap
.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
.subscribe(hero => this.hero = hero);
}
注意switchMap運(yùn)算符如何將可觀察的路由參數(shù)中的 id 映射到一個(gè)新的Observable块茁， 即HeroService.getHero()方法的結(jié)果。
6. Angular模板語法
{{title}} 插值表達(dá)式
(click) 事件綁定
[hero] 屬性綁定
<input [([ngModel])] = "hero.name"> 雙向事件綁定 注意FormsModule
<hero-detail> 子組件
<li *ngFor="let hero of heroes"></li> 指令for
<div *ngIf="hero"> 指令if
父組件AppComponent會(huì)告訴子組件HeroDetailComponent要顯示哪個(gè)英雄桂肌， 告訴的方法是把它的selectedHero屬性綁定到HeroDetailComponent的hero屬性上数焊。 這種綁定是這樣的：
<hero-detail [hero]="selectedHero"></hero-detail>
在等號(hào)的左邊，是方括號(hào)圍繞的hero屬性崎场，這表示它是屬性綁定表達(dá)式的目標(biāo)佩耳。 我們要綁定到的目標(biāo)屬性必須是一個(gè)輸入屬性，否則Angular會(huì)拒絕綁定谭跨，并拋出一個(gè)錯(cuò)誤干厚。
在`hero`屬性前面加上`@[Input]`裝飾器@Input() hero: Hero;
{{selectedHero.name | uppercase}} is my hero 管道擅長做下列工作：格式化字符串答恶、金額、日期和其它顯示數(shù)據(jù)萍诱。 Angular 自帶了一些管道悬嗓，我們也可以寫自己的管道。
