---
# System prepended metadata

title: 'Angualr Coding Rule '
tags: [Coding Rule]

---

# 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** 
```typescript=
constructor(private fb: FormBuilder) {}
this.myForm = this.fb.group({
    username: ['', Validators.required],
    password: [''],
    items: this.fb.array([])
});
```
* 優點：
    1. 簡潔(省去了寫new的部分)
* 缺點：
    1. 有依賴(需要在constructor中導入FormBuilder)
    
**2. FormGroup**
```typescript=
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
```typescript=
// 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為例)
```typescript=
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中
* 用法
```typescript=
// 以下為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的操作
});
```

---

# 資料結構
![image](https://hackmd.io/_uploads/B1KRJdsgA.png)

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

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

如果單一頁面的資料量很大，就直接實作一個 page-view，如果資料量很少就實作 page-dialog，可以參考以下範例命名。
:::
```bash=
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 （功能）
  └ # ...
    # 以下省略
```
