[WIP] 一個基於Angular最新版搭建的博客類小項目

前言：由於項目須要學習了一下Angular，按照 官網的教程作了一個 簡單粗糙的小項目。大體的功能有博客的 新建，刪除，查看詳情，列表展現。使用內存Web API模擬遠程服務器，進行數據操做。臨時安排的變更，可能沒有太多的時間持續研究，因此如今這裏記錄一下。 如下是我邊學習邊記的一些筆記，方便往後回來能夠快速回憶起相關技術點。

路由

一個配置了路由的Angular應用有一個路由服務的單例。當瀏覽器的url改變的時候，路由就會去配置裏
找到相應的路由信息，根據該路由就能夠決定展現哪個組件。
路由器會把相似URL的路徑映射到視圖而不是頁面。瀏覽器本應該加載一個新頁面，可是路由器攔截了這一行爲。
<router-outlet>標籤官網上說它起到了placeholder的做用，當路由根據url找到要展現的組件時，就會把這個組件填充到<router-outlet>中去。
獲取路由中的參數信息： +this.route.snapshot.paramMap.get('id');
route.snapshot 是一個路由信息的靜態快照，抓取自組建剛剛建立完畢以後
paramMap是一個從URL中提取的路由參數值的字典。
javascript(+)操做符會把字符串轉爲數字

數據綁定

用指令 [(ngModel)]="data.content"可實現
遇到報錯 在app.module中導入import { FormsModule } from '@angular/forms';

HTTP獲取資源

主要是使用了common包下的HttpClientModule這一個模塊，使用它則須要把它先導入進app.module中，而後在須要用到的service中導入相應的模塊，例如HttpClient，HttpHeaders等。HttpClient提供了很豐富的Http協議的請求方法。實際使用時可參考源碼。
請求失敗處理：catchError() 操做符會攔截失敗的 Observable。 它把錯誤對象傳給錯誤處理器，錯誤處理器會處理這個錯誤。所以異常被處理後，瀏覽器的控制檯不會報錯。

狀態管理 ngrx

與Redux的關係：ngrx/store的靈感來源於Redux，是一款集成RxJS的Angular狀態管理庫，由Angular的佈道者Rob Wormald開發。它和Redux的核心思想相同，但使用RxJS實現觀察者模式。它遵循Redux核心原則，但專門爲Angular而設計。
Actions（行爲）是信息的載體，它發送數據到reducer（歸約器），而後reducer更新store（存儲）。Actions是store能接受數據的惟一方式。

組件化思想

把全部特性都放在同一個組件中，將會使應用變得難以維護。所以須要把大型組件分紅小一點的子組件，每一個子組件都要集中經歷處理某個特定的任務或者工做流。

依賴注入

DI，是一種重要的應用設計模式。實現方式：類從外部源中請求獲取依賴，無需本身建立。DI框架會在實例化該類時向其提供這個類所聲明的依賴項。
@Injectable()裝飾器是每一個Angular服務定義中的基本要素，把當前類標誌爲可注入的服務。
注入器：負責建立服務實例
提供商：告訴注入器如何建立實例

服務

組件不直接獲取或者保存數據，而是把這一塊的功能放在service中，讓組件專一於如何展現數據，如此開發使得項目的每一個模塊功能更加明確。service裏的方法應該都是異步的。Observable(可觀察對象)的版本能夠實現。

ES6相關

一個模塊從另外一個模塊import進來，如果

• 一個值 ：直接取值取到的是一個會被緩存的結果（例如獲取WebStorage中更新的值，必需要刷新頁面）
• 函數，獲取一個值的引用，會調用該函數，取到最新的值

控制檯輸出與Debug

有時候會發現控制檯輸出的結果與直接在js文件裏進行debug所顯示的結果不一致，那是由於，console.log()採用了懶加載的機制，它展現的是一個引用的值，當你點擊三角箭頭的時候，它會去加載當前變量的值。但debug的數據具備「實時性」。不一致的狀況常常出如今一些異步代碼中。

若是你看到這裏，以爲內容有誤或有可改進之處，歡迎你的提出~