【CuteJavaScript】Angular6入門項目（1.構建項目和建立路由）

本文目錄

• 1、項目起步
• 2、編寫路由組件
• 3、編寫頁面組件
  • 1.編寫單一組件
  • 2.模擬數據
  • 3.編寫主從組件
• 4、編寫服務
  • 1.爲何須要服務
  • 2.編寫服務
• 5、引入RxJS
  • 1.關於RxJS
  • 2.引入RxJS
  • 3.改造數據獲取方式
• 6、改造組件
  • 1.添加歷史記錄組件
  • 2.添加和刪除歷史記錄
• 7、HTTP改造
  • 1.引入HTTP
  • 2.經過HTTP請求數據
  • 3.經過HTTP修改數據
  • 4.經過HTTP增長數據
  • 5.經過HTTP刪除數據
  • 6.經過HTTP查找數據
• 8、結語

這個入門項目是我學習完Angular 英雄指南教程後，本身手寫的一個練習項目，一步一步來，最終的項目源碼能夠這裏查看，大佬們請指點啦。

推薦兩個Angular學習網站：

1. Angular 中文網
2. Angular 修仙之路

還有呢，我沒怎麼關注到樣式，因此樣式會有點醜，主要都放在覈心邏輯中了。
最終實現：

• 首頁書本列表數據展現
• 各個頁面靜態/動態路由跳轉
• 本地模擬數據服務
• 書本數據的增刪改查
• 父子組件通訊
• 經常使用指令使用和介紹

後面我將把這個系列的文章，收錄到個人【CuteJavaScript】中，裏面有整理了ES6/7/8/9知識點和重溫JS基礎系列文章。

那麼，快跟我一步步來完成這個入門項目吧。

零、Angular安裝

Angular 須要 Node.js 的 8.x 或 10.x 版本。
檢查你的Node.js版本，請在終端/控制檯窗口中運行 node -v 命令。
要想安裝Node.js，請訪問 nodejs.org。

1. 安裝Angular CLI

npm install -g @angular/cli
複製代碼

2. 經常使用命令

後續用到會詳細介紹這些命令。

• 啓動服務，並打開新窗口

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 命令。

最後搭建完是這樣：

1、項目起步

1. 建立項目

ng new books
cd books
複製代碼

2. 建立所需的兩個頁面組件

ng g component index
ng g component detail
複製代碼

g是generate的簡寫。

2、編寫路由組件

這裏爲了項目結構先起來，因此先簡單配置一下路由，後面路由會調整，若是遇到什麼不懂，能夠查看Angular 路由與導航。

1. 安裝路由模塊

ng g module app-routing --flat --module=app
複製代碼

知識點：
--flat 把這個文件放進了 src/app 中，而不是單獨的目錄中。
--module=app 告訴 CLI 把它註冊到 AppModule 的 imports 數組中。

2. 引入路由模塊

// app-routing.module.ts 
import { RouterModule, Routes } from '@angular/router';
複製代碼

3. 導出路由模塊的指令

這裏須要添加一個 @NgModule.exports 數組，並傳入RouterModule，導出 RouterModule 讓路由器的相關指令能夠在 AppModule 中的組件中使用。

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

4. 添加定義路由

這裏添加路由的時候，記得將所須要指向的組件也引入進來，這裏咱們須要引入兩個頁面的組件：

// 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' } },
複製代碼

5. 添加路由監視

配置好路由還不能使用，須要一個監視路由變化的工具，這時候須要把RouterModule添加到 @NgModule.imports 數組中，並用 routes 來配置它。
這裏只須要調用imports數組中的 RouterModule.forRoot() 函數就好了，就像這樣：

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

6. 添加路由出口

所謂的路由出口，就是路由所對應的組件展現的地方，接下來咱們在app.component.html內容中，添加<router-outlet></router-outlet>：

<!-- app.component.html -->
<div>
  <h1> 歡迎來到個人我的書屋! </h1>
  <router-outlet></router-outlet>
</div>
複製代碼

這裏的<router-outlet></router-outlet>就是咱們路由輸出的地方，也是組件展現的地方，簡單理解就是，它會告訴路由器要在哪裏顯示路由的視圖。

7. 添加路由連接

所謂的路由連接，就是出發路由跳轉事件的地方，好比一個按鈕，一張圖片等，咱們仍是在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> | 
複製代碼

8. 獲取帶參數路由的參數

在第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的結果。
到這一步，咱們算是把路由配置完成了，接下來能夠開始作頁面的邏輯了。

本部份內容到這結束

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	https://github.com/pingan8787/Leo_Reading/issues
JS小冊	js.pingan8787.com
微信公衆號	前端自習課