{%hackmd DfWYF9cYREebVNN1eEOz-w %}

Angular sprint
======

> ***不知自己不知道, 那你會以為你知道.***

###### tags: `Angular` `202204`

#### refrenece: https://angular.io/start

#### html binding component:
- []: [property]="value"
- {{}}: {{value}}
- (): (event)="handle"
- [(ng-model)]: input data <=> "property"

#### angular router:
- app.moudlue 中設定 RouterModule.forRoot, 設定 url path:component
- RouterLink 可以定義 a element RUL: <a [routerLink]="['/products', product.id]">
- RouterModule 要指定路徑對應的 component
- 有多組 appModules, 可分別設定 Router. 設定組合技:
- 透過 AppRoutingModule 設定路徑對應的 appModules
- RouterModule.forChild(Component1Routes)
- Component1Routes: Routes = [{ path: '', children: [ { path: '', component: <> }, ] }]

#### component IoC:
- ActivatedRoute is specific to each component that the Angular Router loads. ActivatedRoute contains information about the route and the route's parameters.
- 可從建構式透過 IoC 取得 ActivateeRoute
- routeParams 可取得 route 的訊息(url, queryPaams...)
- angular service: Injectable, shareable

#### angular httpClient:
Angular's HttpClientModule registers the providers your application needs to use the HttpClient service throughout your application.
- async pipe: The async pipe returns the latest value from a stream of data and continues to do so for the life of a given component.
- ```<li *ngFor="let hero of heroes$ | async" >```
- $: 告知 for 迴圈操作的對象是 Observable
- |: async pipe 來做 subscribe 的動作

#### angular FormBuilder: 快速建立 html form & binding data

#### 相關指令

rem The Angular CLI. install the Angular CLI globally with:
npm install -g @angular/cli

rem Create a workspace and initial application
ng new <<app name>>

rem Use the following CLI command to run your application locally (default port 4200 ):
rem --open 打開瀏覽器, 縮寫為 -o
ng serve --open

rem  If the default port 4200 is not available, you can specify another port with the port flag as in the following example:
ng serve --port 4201

rem To build your application for production, use the build command. By default, this command uses the production build configuration.
ng build

ren generate router, --flat 不建立資料夾, --module=<component name> 讓 cli 知道是誰的 router.
ng generate module <router name> --flat --module=app

rem Generate Component, service
ng generate component <<component name>>
ng generate service <<service name>>

rem check node version(https://nodejs.org/en/about/releases/)
node -v

#### reference: https://ithelp.ithome.com.tw/users/20107113/ironman/1240

#### Directive:
Decorator that marks a class as an Angular directive. You can define your own directives to attach custom behavior to elements in the DOM.

// cmd 建立 directive
ng generate directive <<directive name>>

// 使用情境多是跟使用者互動, 如滑鼠移過去要改變顏色 ..等之類的
import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

#### PIPE
angular 有提供基本的 format 去呈現，基本的用法像 ```{{ shipping.price | currency }}```

#### Reactive Forms
Reactive forms are built around observable streams
FormGroup 透過 FormBuilder 較為簡潔. 驗證可在 build 時設定 Validators.

- appModuel add ReactiveFormsModule
- Nested FormGroups

    export class ProfileEditorComponent {
      profileForm = this.fb.group({
        firstName: ['', Validators.required],
        lastName: [''],
        address: this.fb.group({ // the part "child FormGroup"
          street: [''],
          city: [''],
          state: [''],
          zip: ['']
        }),
        aliases: this.fb.array([
          this.fb.control('')
        ])
      });

      get aliases() {
        return this.profileForm.get('aliases') as FormArray;
      }

      constructor(private fb: FormBuilder) { }

      updateProfile() {
        this.profileForm.patchValue({
          firstName: 'Nancy',
          address: {
            street: '123 Drew Street'
          }
        });
      }

      addAlias() {
        this.aliases.push(this.fb.control(''));
      }

      onSubmit() {
        // TODO: Use EventEmitter with form value
        console.warn(this.profileForm.value);
      }
    }

    // the part "child FormGroup"
    <div formGroupName="address" class="well well-lg">
      <h4>Secret Lair</h4>
      <div class="form-group">
        <label class="center-block">Street:
          <input class="form-control" formControlName="street">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">City:
          <input class="form-control" formControlName="city">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">State:
          <select class="form-control" formControlName="state">
            <option *ngFor="let state of states" [value]="state">{{state}}</option>
          </select>
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">Zip Code:
          <input class="form-control" formControlName="zip">
        </label>
      </div>
    </div>

#### Angular 部分筆記 - 無修正 (2018 Angular)
- 原則與實作原理
- 特定功能的 主 Component: 致力整合 特定功能下的 小 Component
- 特定功能下的 小 Component: 致力完成特定功能頁面上局部的畫面與功能
- 特定功能的 Service: 致力把特定功能的 Model, 提供給 對應功能的 Component.
- Angular 檔案結構之功能(Angular 原檔案配置)
- 專案/.. package.json: 該專案依賴的套件
- 專案/src/assets/..: 放置共用圖片與主題的地方
- 專案/src/index.html: 該檔案是起始頁的進入點. 也是必定會載入於頁面中的.
- 專案/src/main.ts: 該檔案室 Angular web app 的進入點.做基本模組的置入
- 專案/src/polyfills.ts: 設定 web app 整體環境的地方. 類似以前 MVC 中的 webconfig
- 專案/src/styles.scss: 在這裡的 css 將會套用至全體的 Component.
- 專案/src/app/app.component.html: 是起始頁進入點 <app-root></app-root> 標籤中所代表的頁面.
- 專案/src/app/app.module.ts: 這裡是打包整個網站所需要引入的 套件、angular 類別、component、moduler 等核心元件的地方.
- 專案/src/app/app-routing.module.ts: 這裡是路由設定的地方. <router-outlet></router-outlet>

- bankpro Angular 檔案結構
- 這裡專注於 /src/app 檔案結構與架構的擬定 !!
- 在 /src/app/.. 中會設定以下基本目錄: [被抽離且共用]
- assets/: 放置共同使用的圖片、主題...等.
- modules/: 放置共同使用的套件引入點 ex: materail.
- models/: 放置共同使用的 viewModel
- components/: 被 app.component.module.ts 引用的模塊
- shared/: 放置共同使用的 component.
- services/: 放置共同使用的 service

- 在 /src/app/"module功能": [獨立, 致力完成特定功能, 會有自己的 app.module.ts 檔]
- 每個獨立的 module功能 基本目錄 [services、component、models、assets]
- EX: order 這個獨立 module 的檔案結構會有:
- ```
.../src/app/order/..
根目錄底下
{
services/..
component/..
models/..
assets/..
app.order.routing.module.ts
order.module.ts
}

    - 撰寫 service 時的要點
        - 功能.service.ts : 致力撰寫商業邏輯.
        - 功能.service.endpotin.ts: [類似 MVC 中的 DAO Lair]
        - 管理所有 api 的網址, 且撰寫最基本的 "新刪修查" 針對後臺的 api 呼叫. 且在請求(header)中塞入 token & 認證相關資訊.