# Angualr Coding Rule

:::success
# 📋 目錄
1. [開發工具](#開發工具)
2. [命名規則](#命名規則)
3. [API 注意事項](#API-注意事項)

#### 誼庭 :< Form 的寫法 , constructor 必要 service , activatedRoute >httpClient , 不寫進service , NotificationService 用法

4. [資料結構](#資料結構)
=======================
:::

# 開發工具
IDE : VSCode
Plug in :

# 命名規則
* componet name : 全小寫(可以加 - )
* BehaviorSubject : 參數名稱尾部加 $
* 程式內參數 : 第一字母小寫,駝峰式
* 每一段程式結束記得加分號'
* Ray : function name : save , delete , get

# API 注意事項
* Call API 不另外寫 Service, 不寫Model

頁面call api 不寫進 service, 如有共用需求,寫進share 的service
PIPE 的使用
前端 格式驗證
Table
confirm dialog
麵包屑設定在各頁面的 -routing.module.ts , 加入, data: { breadcrumb: '' },

## ===================================

## form(未定版)
**1. FormBuilder**

constructor(private fb: FormBuilder) {}
this.myForm = this.fb.group({
    username: ['', Validators.required],
    password: [''],
    items: this.fb.array([])
});

* 優點：
1. 簡潔(省去了寫new的部分)
* 缺點：
1. 有依賴(需要在constructor中導入FormBuilder)

**2. FormGroup**

this.myForm = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required),
    item: new FormArray([])
});

* 優點：
1. 靈活(省去了寫new的部分)
* 缺點：
1. 長
2. 可讀性較低

**3. UntypedFormControl**
* 這是一個虛構的類，用於沒有特並類型的表單(個人不建議，容易造成編譯錯誤)

### form get set

// get
const usernameValue = this.myForm.get('username').value;
const passwordValue = this.myForm.get('password').value;
const itemValue = this.myForm.get('item').value; 

// set
this.myForm.setValue({
  username: 'newUsername',
  password: 'newPassword',
  item: ['item1', 'item2', 'item3']
});

this.myForm.get('username').setValue('newUsername');

## constructor(import 以officepie為例)

import { ActivatedRoute, Router } from '@angular/router';
import { HttpClient } from "@angular/common/http";
import { NotificationService } from 'src/app/shared/services/notification.service';

constructor(
    private router: Router,
    private activatedRoute用法: ActivatedRoute,
    private httpClient: HttpClient,
    private notificationService: NotificationService,) {}

==ps.== BehaviorSubject待討論再決定是否放進constructor中
* 用法

// 以下為router用法
this.router.navigate(['/detail']); // 網站內跳轉
this.router.navigate(['/detail', 1]); // 跳轉 帶參數  參數為1

// 以下為activatedRoute用法
this.activatedRoute.params.subscribe(params => {
    console.log(params.參數名稱); // get 參數
  });
this.route.queryParams.subscribe(params => {
    console.log(params.參數名稱); // get 查詢參數
  });

// 以下為httpClient用法
this.httpClient.get<any>("路徑", {變數})
    .subscript(value => {
        console.log(value); // 不用pip是因為現在不用寫service，所以可以省去Observable的操作
});

---

# 資料結構

一個專案裡面會有以下內容：
1. layout：布局設計（通常直接買 template 來用）
2. page：頁面
3. shared：共用模組
4. 預設檔案

頁面是我們主要實作的地方，以下只討論頁面的資料結構：請依照「頁面 -> 功能 -> 功能項目」命名。
:::info
💡 **一般來說會有四種功能：檢視(view)、編輯(edit)、列表(list)、視窗(dialog)**

如果單一頁面的資料量很大，就直接實作一個 page-view，如果資料量很少就實作 page-dialog，可以參考以下範例命名。
:::

page （頁面）
└ pay （功能）
│ └ pay-list （功能項目）
│ │ └ # pay-list.component.html
│ │ └ # pay-list.component.scss
│ │ └ # pay-list.component.ts
│ └ payslip-list （功能項目）
│ │ └ # payslip-list.component.html
│ │ └ # payslip-list.component.scss
│ │ └ # payslip-list.component.ts
│ └ pay-step-view （功能項目）
│   └ # pay-step-view.component.html
│   └ # pay-step-view.component.scss
│   └ # pay-step-view.component.ts
│
└ member （功能）
│ └ member-edit （功能項目）
│ │ └ # member-edit.component.html
│ │ └ # member-edit.component.scss
│ │ └ # member-edit.component.ts
│ └ member-leave-view （功能項目）
│   └ # member-leave-view.component.html
│   └ # member-leave-view.component.scss
│   └ # member-leave-view.component.ts
│
└ team （功能）
  └ # ...
    # 以下省略