[ng] Angular note

Angular　note
 
Angular CLI 實用指令
npm install -g angular-cli 安裝
ng --help 說明
ng new 建立新專案
ng g c 建立component
ng g p 建立pipe
...常用<schematic>：
class component directive enum guard interface module pipe service
ng serve --open 啟用網站
 
基本內容建立格式
  1. Import
  2. 修飾詞
  3. Output
 
 
資料綁定 4種
  {{}}
  [property] = "value" : 屬性綁定
  (event) = "hander"   : 事件綁定
  [(ngModel)] = "property" : 雙向綁定
 
<!-- 雙向綁定 -->
<input [(ngModel)]="property">
<!-- 屬性綁定 -->
<input [ngModel]="property">
<!-- 事件綁定 -->
<input (ngModelChange)="handler($event)">

裝飾結構說明
@Component :
@Pipes
@Directive :
結構型Structural Directives:*ngfor,
屬性型Attribute Directives:[(ngModel)]
@Injectable : Service 的裝飾器

Routing說明
forRoot
forChild
路由在查找的時候是有順序性:AppRoutingModule放後面
模組延遲載入 : ex.loadChildren: './feature/feature.module#FeatureModule'
預先載入 :頁面初始化的時候就把所有可延遲載入的模組透過背景非同步地下載
負責重新配置頁面中應該顯示哪些 Component
[routerLink]="['..', path.checkoutFlow.paymentInfo]"  回上層

其他:
Angular JIT vs AOT
Component 只負責處理畫面、資料綁定
Service 則負責像是取得資料、表單驗證等等的邏輯處理，

ref :
[Angular 深入淺出三十天] https://ithelp.ithome.com.tw/articles/10205808
custom pipes https://angular.io/guide/pipes#custom-pipes
[Angular 大師之路] https://ithelp.ithome.com.tw/articles/10203550
[Angular2速成班]用Angular CLI節省你的開發時間　https://dotblogs.com.tw/wellwind/2016/09/30/angular2-angular-cli
HTTP Cache 機制 https://blog.techbridge.cc/2017/06/17/cache-introduction/

好用擴充:
angular2-prettyjson