本文目錄
- 一、項目起步
- 二、編寫路由組件
-
三、編寫頁面組件
- 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
的結果。
到這一步,我們算是把路由配置完成了,接下來可以開始做頁面的邏輯了。
本部分內容到這結束
Author | 王平安 |
---|---|
[email protected] | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推薦 | https://github.com/pingan8787... |
JS小冊 | js.pingan8787.com |
微信公衆號 | 前端自習課 |