【CuteJavaScript】Angular6入門專案（1.構建專案和建立路由）
- 一、專案起步
- 二、編寫路由元件
- 三、編寫頁面元件
- 1.編寫單一元件
- 2.模擬資料
- 3.編寫主從元件
- 四、編寫服務
- 1.為什麼需要服務
- 2.編寫服務
- 五、引入RxJS
- 1.關於RxJS
- 2.引入RxJS
- 3.改造資料獲取方式
- 六、改造元件
- 1.新增歷史記錄元件
- 2.新增和刪除歷史記錄
- 七、HTTP改造
- 1.引入HTTP
- 2.通過HTTP請求資料
- 3.通過HTTP修改資料
- 4.通過HTTP增加資料
- 5.通過HTTP刪除資料
- 6.通過HTTP查詢資料
- 八、結語
這個入門專案是我學習完Angular 英雄指南教程後，自己手寫的一個練習專案，一步一步來，最終的 專案原始碼可以這裡檢視 ，大佬們請指點啦。
推薦兩個Angular學習網站：
還有呢，我沒怎麼關注到樣式，所以樣式會有點醜，主要都放在核心邏輯中了。
最終實現：
- 首頁書本列表資料展示
- 各個頁面靜態/動態路由跳轉
- 本地模擬資料服務
- 書本資料的增刪改查
- 父子元件通訊
- 常用指令使用和介紹
後面我將把這個系列的文章，收錄到我的【CuteJavaScript】中，裡面有整理了 ES6/7/8/9知識點 和 重溫JS基礎系列 文章。
那麼，快跟我一步步來完成這個入門專案吧。
零、Angular安裝
Angular 需要 Node.js 的 8.x 或 10.x 版本。
檢查你的 Node.js 版本，請在終端/控制檯視窗中執行 node -v 命令。
要想安裝 Node.js ，請訪問nodejs.org。
- 安裝Angular CLI
npm install -g @angular/cli 複製程式碼
- 常用命令
後續用到會詳細介紹這些命令。
- 啟動服務，並開啟新視窗
ng serve --open # --open 可簡寫 -o 複製程式碼
- 建立新元件
ng generate component books # generate 可簡寫 g 複製程式碼
- 建立新服務
ng generate service books 複製程式碼
- 建立路由模組
ng generate module app-routing --flat --module=app 複製程式碼
-
其他
另外Angular CLI還有很多的命令提供，詳細可以查閱官方文件Angular CLI 命令。
最後搭建完是這樣：
一、專案起步
- 建立專案
ng new books cd books 複製程式碼
- 建立所需的兩個頁面元件
ng g component index ng g component detail 複製程式碼
g 是 generate 的簡寫。
二、編寫路由元件
這裡為了專案結構先起來，所以先簡單配置一下路由，後面路由會調整，如果遇到什麼不懂，可以檢視Angular 路由與導航。
- 安裝 路由模組
ng g module app-routing --flat --module=app 複製程式碼
知識點：
--flat 把這個檔案放進了 src/app 中，而不是單獨的目錄中。
--module=app 告訴 CLI 把它註冊到 AppModule 的 imports 陣列中。
- 引入 路由模組
// app-routing.module.ts
import { RouterModule, Routes } from '@angular/router';
複製程式碼
- 匯出 路由模組 的指令
這裡需要新增一個 @NgModule.exports 陣列，並傳入 RouterModule ，匯出 RouterModule 讓路由器的相關指令可以在 AppModule 中的元件中使用。
// app-routing.module.ts
@NgModule({
imports: [CommonModule],
declarations: [],
exports: [RouterModule]
})
複製程式碼
- 新增定義路由
這裡新增路由的時候，記得將所需要指向的元件也引入進來，這裡我們需要引入兩個頁面的元件：
// 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
]
複製程式碼
知識點：
angular 的路由接收兩個引數：
-
path：用於匹配瀏覽器位址列中URL的字串。 -
component：當導航到此路由時，路由器展示的元件名稱。
第1行程式碼：
作為路由系統的預設路由，當所有路由都不匹配的話，就會重定向到這個路由，並展示對應的元件。
第2行程式碼：
正常情況下的路由配置。
第3行程式碼：
配置的是攜帶引數的路由，在路由 / 後，用 : 拼接引數名來實現， 獲取這個引數的值的方法後面會介紹 。
另外，我們還可以這麼傳遞引數，直接將資料通過路由傳入，後面還會介紹：
{ path: 'pathname', component: DemoComponent, data: { title: 'pingan8787' } },
複製程式碼
- 新增路由監視
配置好路由還不能使用，需要一個監視路由變化的工具，這時候需要把 RouterModule 新增到 @NgModule.imports 陣列中，並用 routes 來配置它。
這裡只需要呼叫 imports 陣列中的 RouterModule.forRoot() 函式就行了，就像這樣：
// app-routing.module.ts imports: [ RouterModule.forRoot(routes) ], 複製程式碼
- 新增路由出口
所謂的路由出口，就是路由所對應的元件展示的地方，接下來我們在 app.component.html 內容中，新增 <router-outlet></router-outlet> ：
<!-- app.component.html --> <div> <h1> 歡迎來到我的個人書屋! </h1> <router-outlet></router-outlet> </div> 複製程式碼
這裡的 <router-outlet></router-outlet> 就是我們路由輸出的地方，也是元件展示的地方，簡單理解就是，它會告訴路由器要在哪裡顯示路由的檢視。
- 新增路由連結
所謂的路由連結，就是出發路由跳轉事件的地方，比如一個按鈕，一張圖片等，我們還是在 app.component.html 中，使用 <a routerLink="/path"></a> 新增3個按鈕：
<!-- app.component.html --> <div> <h1> 歡迎來到我的個人書屋! </h1> <a routerLink="">重定向</a> | <a routerLink="/index">開啟首頁</a> | <a routerLink="/detail/1">開啟書本詳情</a> <router-outlet></router-outlet> </div> 複製程式碼
這邊3個按鈕的路由，我們將上面定義的3種路由，傳入到 routerLink 引數中，現在就專案就可以實現頁面跳轉了。
另外，這裡還可以傳入一個可選引數 routerLinkActive="className" ，表示當這個 <a> 標籤啟用的時候顯示的樣式，值是一個字串，為樣式的類名：
<a routerLink="/index" routerLinkActive="activeClass">開啟首頁</a> | 複製程式碼
- 獲取帶引數路由的引數
在第7步中，我們點選 開啟書本詳情 按鈕中，在路由中帶了引數，這時候我們需要這麼來獲取這個引數：
- 先匯出模組
ActivatedRoute和Location：
// detail.component.ts
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
複製程式碼
- 再注入到建構函式中，並將值作為私有變數：
// detail.component.ts
export class DetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {}
}
複製程式碼
知識點：
ActivatedRoute 儲存該 DetailComponent 例項的路由資訊。可以從這個元件獲取URL中的路由引數和其他資料。
Location 是一個 Angular 的服務，用來與瀏覽器打交道。後續會使用它來導航回上一個檢視。
- 提取路由引數：
這裡宣告 getDetail 方法，提取路由引數，並 ngOnInit 生命週期鉤子方法 在中執行。
// detail.component.ts
ngOnInit() {
this.getDetail()
}
getDetail(): void{
const id = +this.route.snapshot.paramMap.get('id');
console.log(`此課本的id是${id}`)
}
複製程式碼
知識點：
route.snapshot 是一個路由資訊的 靜態快照 ，抓取自元件剛剛建立完畢之後。
paramMap 是一個URL中路由所攜帶的引數值的物件。"id"對應的值就是要獲取的書本的 id。
注意：
路由引數總會是字串。這裡我們使用 (+) 操作符，將字串轉換成數字。
現在在瀏覽器上重新整理下頁面，再點選 開啟書本詳情 按鈕，可以看到控制檯輸出了 此課本的id是1 的結果。
到這一步，我們算是把路由配置完成了，接下來可以開始做頁面的邏輯了。