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

bergwhite 發布于2019-08-23 15:25 / 2632人閱讀

摘要：啟動服務，并打開新窗口可簡寫創建新組件可簡寫創建新服務創建路由模塊其他另外還有很多的命令提供，詳細可以查閱官方文檔命令。引入路由模塊導出路由模塊的指令這里需要添加一個數組，并傳入，導出讓路由器的相關指令可以在中的組件中使用。

本文目錄

一、項目起步

二、編寫路由組件

三、編寫頁面組件

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學習網站：

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內容中，添加：



   歡迎來到我的個人書屋!

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

添加路由鏈接

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



   歡迎來到我的個人書屋! 
  重定向 | 
  打開首頁 | 
  打開書本詳情

這邊3個按鈕的路由，我們將上面定義的3種路由，傳入到routerLink參數中，現在就項目就可以實現頁面跳轉了。

另外，這里還可以傳入一個可選參數routerLinkActive="className"，表示當這個標簽激活的時候顯示的樣式，值是一個字符串，為樣式的類名：

打開首頁 |

獲取帶參數路由的參數

在第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...
JS小冊	js.pingan8787.com
微信公眾號	前端自習課

云服務器 GPU云服務器如何構建java項目 VS2013項目創建 pycharm創建python項目寶之云idc四期1號太保數據中心項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102028.html

【CuteJavaScript】Angular6入門項目（2.構建項目頁面和組件）

摘要：編寫單一組件我們首先寫一個書本信息的組件，代碼如下單個課本像火焰像灰燼程姬知識點是一個的復寫器指令，就像中的和中的。寫到這里，看看我們項目，還是一樣正常在運行，只是現在項目中組件分工更加明確了。本文目錄一、項目起步二、編寫路由組件三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件四、編寫服務 1.為什么需要服務 2.編寫服務五、...

Lemon_95 2019-08-23 15:25 評論0 收藏0
【CuteJavaScript】Angular6入門項目（3.編寫服務和引入RxJS）

摘要：發布通過回調方法向發布事件。觀察者一個回調函數的集合，它知道如何去監聽由提供的值。本文目錄一、項目起步二、編寫路由組件三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件四、編寫服務 1.為什么需要服務 2.編寫服務五、引入RxJS 1.關于RxJS 2.引入RxJS 3.改造數據獲取方式六、改造組件 1.添...

RebeccaZhong 2019-08-23 15:25 評論0 收藏0
【CuteJavaScript】Angular6入門項目（4.改造組件和添加HTTP服務）

摘要：然后我們在父組件上添加事件監聽，并傳入本地的在對應的中添加方法再來，我們在子組件上多導入和，并添加修飾器和調用這樣就實現了我們父子組件之間的事件傳遞啦，現在我們的頁面還是正常運行，并且刪除一條數據后，頁面數據會更新。本文目錄一、項目起步二、編寫路由組件三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件四、編寫服務 1.為什么需要服務 ...

BDEEFE 2019-08-23 15:25 評論0 收藏0
【CuteJavaScript】GraphQL真香入門教程

摘要：最終代碼省略其他輸入類型用標識查詢類型需要至少定義一個不要會不顯示查詢這里需要轉成數組因為前面定義了返回值是類型相當于數據庫的添加操作相當于數據庫的更新操作省略其他現在我們可以啟動服務器，在上測試下效果了。 showImg(https://segmentfault.com/img/remote/1460000019142304?w=893&h=438); 看完復聯四，我整理了這份 Gr...

bingo 2019-08-26 13:44 評論0 收藏0
angular6入門之安裝angular-cli

摘要：由于之前安裝的是的版本，需要卸載了，安裝最新的版本。清除緩存，確保卸載干凈具體參考安裝最新版本安裝成功后提示意思是版的需要版本最低，我之前的是的版本。先安裝，去下載安裝。在命令行輸入檢查是否安裝成功。最近聽了大漠老師分享的angular6的講解（附個鏈接大漠老師課程：http://www.ngfans.net/topic/2...），像是沙漠中發現了綠洲一樣，決定好好學習一番，于是準...

loonggg 2019-08-22 18:34 評論0 收藏0