摘要：?jiǎn)?dòng)服務(wù)，并打開(kāi)新窗口可簡(jiǎn)寫創(chuàng)建新組件可簡(jiǎn)寫創(chuàng)建新服務(wù)創(chuàng)建路由模塊其他另外還有很多的命令提供，詳細(xì)可以查閱官方文檔命令。引入路由模塊導(dǎo)出路由模塊的指令這里需要添加一個(gè)數(shù)組，并傳入，導(dǎo)出讓路由器的相關(guān)指令可以在中的組件中使用。

一、項(xiàng)目起步

二、編寫路由組件

三、編寫頁(yè)面組件

1.編寫單一組件

2.模擬數(shù)據(jù)

3.編寫主從組件

四、編寫服務(wù)

1.為什么需要服務(wù)

2.編寫服務(wù)

五、引入RxJS

1.關(guān)于RxJS

2.引入RxJS

3.改造數(shù)據(jù)獲取方式

六、改造組件

1.添加歷史記錄組件

2.添加和刪除歷史記錄

七、HTTP改造

1.引入HTTP

2.通過(guò)HTTP請(qǐng)求數(shù)據(jù)

3.通過(guò)HTTP修改數(shù)據(jù)

4.通過(guò)HTTP增加數(shù)據(jù)

5.通過(guò)HTTP刪除數(shù)據(jù)

6.通過(guò)HTTP查找數(shù)據(jù)

八、結(jié)語(yǔ)

這個(gè)入門項(xiàng)目是我學(xué)習(xí)完Angular 英雄指南教程后，自己手寫的一個(gè)練習(xí)項(xiàng)目，一步一步來(lái)，最終的項(xiàng)目源碼可以這里查看，大佬們請(qǐng)指點(diǎn)啦。

推薦兩個(gè)Angular學(xué)習(xí)網(wǎng)站：

Angular 中文網(wǎng)

Angular 修仙之路

還有呢，我沒(méi)怎么關(guān)注到樣式，所以樣式會(huì)有點(diǎn)丑，主要都放在核心邏輯中了。
最終實(shí)現(xiàn)：

首頁(yè)書本列表數(shù)據(jù)展示

各個(gè)頁(yè)面靜態(tài)/動(dòng)態(tài)路由跳轉(zhuǎn)

本地模擬數(shù)據(jù)服務(wù)

書本數(shù)據(jù)的增刪改查

父子組件通信

常用指令使用和介紹

后面我將把這個(gè)系列的文章，收錄到我的【CuteJavaScript】中，里面有整理了ES6/7/8/9知識(shí)點(diǎn)和重溫JS基礎(chǔ)系列文章。

那么，快跟我一步步來(lái)完成這個(gè)入門項(xiàng)目吧。

Angular 需要 Node.js 的 8.x 或 10.x 版本。
檢查你的Node.js版本，請(qǐng)?jiān)诮K端/控制臺(tái)窗口中運(yùn)行 node -v 命令。
要想安裝 Node.js，請(qǐng)?jiān)L問(wèn) nodejs.org。

安裝Angular CLI

npm install -g @angular/cli

常用命令

后續(xù)用到會(huì)詳細(xì)介紹這些命令。

啟動(dòng)服務(wù)，并打開(kāi)新窗口

ng serve --open
# --open 可簡(jiǎn)寫 -o

創(chuàng)建新組件

ng generate component books
# generate 可簡(jiǎn)寫 g

創(chuàng)建新服務(wù)

ng generate service books

創(chuàng)建路由模塊

ng generate module app-routing --flat --module=app

其他

另外Angular CLI還有很多的命令提供，詳細(xì)可以查閱官方文檔 Angular CLI 命令。

最后搭建完是這樣：

創(chuàng)建項(xiàng)目

ng new books
cd books

創(chuàng)建所需的兩個(gè)頁(yè)面組件

ng g component index
ng g component detail

g是generate的簡(jiǎn)寫。

這里為了項(xiàng)目結(jié)構(gòu)先起來(lái)，所以先簡(jiǎn)單配置一下路由，后面路由會(huì)調(diào)整，如果遇到什么不懂，可以查看Angular 路由與導(dǎo)航。

安裝路由模塊

ng g module app-routing --flat --module=app

知識(shí)點(diǎn)：
--flat 把這個(gè)文件放進(jìn)了 src/app 中，而不是多帶帶的目錄中。
--module=app 告訴 CLI 把它注冊(cè)到 AppModule 的 imports 數(shù)組中。

引入路由模塊

// app-routing.module.ts  
import { RouterModule, Routes } from "@angular/router";

導(dǎo)出路由模塊的指令

這里需要添加一個(gè) @NgModule.exports 數(shù)組，并傳入RouterModule，導(dǎo)出 RouterModule 讓路由器的相關(guān)指令可以在 AppModule 中的組件中使用。

// app-routing.module.ts  
@NgModule({
  imports: [CommonModule],
  declarations: [],
  exports: [RouterModule]
})

添加定義路由

這里添加路由的時(shí)候，記得將所需要指向的組件也引入進(jìn)來(lái)，這里我們需要引入兩個(gè)頁(yè)面的組件：

// app-routing.module.ts  
import { IndexComponent } from "./index/index.component";
import { DetailComponent } from "./detail/detail.component";

然后將我們所需要的路由定義在routes變量中，類型是我們引入的Routes：

// app-routing.module.ts  
const routes: Routes = [
  { path: "", redirectTo:"/index", pathMatch:"full" },    // 1
  { path: "index", component: IndexComponent},            // 2
  { path: "detail/:id", component: DetailComponent},      // 3 
]

知識(shí)點(diǎn)：
angular的路由接收兩個(gè)參數(shù)：

path：用于匹配瀏覽器地址欄中 URL 的字符串。

component：當(dāng)導(dǎo)航到此路由時(shí)，路由器展示的組件名稱。

第1行代碼：
作為路由系統(tǒng)的默認(rèn)路由，當(dāng)所有路由都不匹配的話，就會(huì)重定向到這個(gè)路由，并展示對(duì)應(yīng)的組件。
第2行代碼：
正常情況下的路由配置。
第3行代碼：
配置的是攜帶參數(shù)的路由，在路由/后，用 : 拼接參數(shù)名來(lái)實(shí)現(xiàn)，獲取這個(gè)參數(shù)的值的方法后面會(huì)介紹。

另外，我們還可以這么傳遞參數(shù)，直接將數(shù)據(jù)通過(guò)路由傳入，后面還會(huì)介紹：

{ path: "pathname", component: DemoComponent, data: { title: "pingan8787" } },

添加路由監(jiān)視

配置好路由還不能使用，需要一個(gè)監(jiān)視路由變化的工具，這時(shí)候需要把RouterModule添加到 @NgModule.imports 數(shù)組中，并用 routes 來(lái)配置它。
這里只需要調(diào)用 imports 數(shù)組中的 RouterModule.forRoot() 函數(shù)就行了，就像這樣：

// app-routing.module.ts  
imports: [ RouterModule.forRoot(routes) ],

添加路由出口

所謂的路由出口，就是路由所對(duì)應(yīng)的組件展示的地方，接下來(lái)我們?cè)?b>app.component.html內(nèi)容中，添加：

  
 歡迎來(lái)到我的個(gè)人書屋! 
  

這里的就是我們路由輸出的地方，也是組件展示的地方，簡(jiǎn)單理解就是，它會(huì)告訴路由器要在哪里顯示路由的視圖。

添加路由鏈接

所謂的路由鏈接，就是出發(fā)路由跳轉(zhuǎn)事件的地方，比如一個(gè)按鈕，一張圖片等，我們還是在app.component.html中，使用添加3個(gè)按鈕：

  
 歡迎來(lái)到我的個(gè)人書屋! 
  重定向 | 
  打開(kāi)首頁(yè) | 
  打開(kāi)書本詳情
  

這邊3個(gè)按鈕的路由，我們將上面定義的3種路由，傳入到routerLink參數(shù)中，現(xiàn)在就項(xiàng)目就可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)了。

另外，這里還可以傳入一個(gè)可選參數(shù)routerLinkActive="className"，表示當(dāng)這個(gè)標(biāo)簽激活的時(shí)候顯示的樣式，值是一個(gè)字符串，為樣式的類名：

打開(kāi)首頁(yè) | 

獲取帶參數(shù)路由的參數(shù)

在第7步中，我們點(diǎn)擊 打開(kāi)書本詳情 按鈕中，在路由中帶了參數(shù)，這時(shí)候我們需要這么來(lái)獲取這個(gè)參數(shù)：

先導(dǎo)出模塊ActivatedRoute和Location：

// detail.component.ts
import { ActivatedRoute } from "@angular/router";
import { Location } from "@angular/common";

再注入到構(gòu)造函數(shù)中，并將值作為私有變量：

// detail.component.ts
export class DetailComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private location: Location
  ) { }
  ngOnInit() {}
}

知識(shí)點(diǎn)：
ActivatedRoute 保存該 DetailComponent 實(shí)例的路由信息。可以從這個(gè)組件獲取URL中的路由參數(shù)和其他數(shù)據(jù)。
Location 是一個(gè) Angular 的服務(wù)，用來(lái)與瀏覽器打交道。后續(xù)會(huì)使用它來(lái)導(dǎo)航回上一個(gè)視圖。

提取路由參數(shù)：

這里聲明getDetail方法，提取路由參數(shù)，并ngOnInit生命周期鉤子方法在中執(zhí)行。

// detail.component.ts
ngOnInit() {
    this.getDetail()
}
getDetail(): void{
    const id = +this.route.snapshot.paramMap.get("id");
    console.log(`此課本的id是${id}`)
}

知識(shí)點(diǎn)：
route.snapshot 是一個(gè)路由信息的靜態(tài)快照，抓取自組件剛剛創(chuàng)建完畢之后。
paramMap 是一個(gè)URL中路由所攜帶的參數(shù)值的對(duì)象。"id"對(duì)應(yīng)的值就是要獲取的書本的 id。
注意：
路由參數(shù)總會(huì)是字符串。這里我們使用 (+) 操作符，將字符串轉(zhuǎn)換成數(shù)字。

現(xiàn)在在瀏覽器上刷新下頁(yè)面，再點(diǎn)擊 打開(kāi)書本詳情 按鈕，可以看到控制臺(tái)輸出了 此課本的id是1 的結(jié)果。
到這一步，我們算是把路由配置完成了，接下來(lái)可以開(kāi)始做頁(yè)面的邏輯了。

本部分內(nèi)容到這結(jié)束