【薦】Angular官方代碼風格指南

本文為筆者對Angular官網風格指南的整理版本，刪除／增加了部分內容。另外，原文對每個規範都作出了原因的解釋，個別還有示例，需要的請點擊查看原文。

原鏈接：英文文檔 ／ 中文文檔

單一職責

• 一個文件定義一樣東西，比如一個組件、一個服務、一個管道、一個指令
• 每個文件最多不要超過400行
• 定義功能單一的函數
• 一個函數最多不要超過75行

命名規範

• 文件名採用feature.type.**，feature表示特性，type表示類型
• 模塊用 .module.ts
• 路由模塊用 -routing.module.ts
• 組件用 .component.ts|html|css
• 服務用 .service.ts
• 管道用 .pipe.ts
• 指令用 .directive.ts
• 類型用 .model.ts
• 數據用 .data.ts
• 用"-"來分割單詞，比如hero-list.component.ts
• 單元測試文件名保持和測試對象一致，並以.spec.ts結尾
• 端到端測試文件名保持和測試對象一致，並以.e2e-spec.ts結尾
• 類名用大寫駝峰規則，並且保持跟文件名的一致
• 模塊：比如app.module.ts定義的類名為AppModule
• 路由模塊：比如app-routing.module.ts定義的類名魏AppRoutingModule
• 組件：比如hero-list.component.ts定義的類名為HeroListComponent
• 服務：比如logger.service.ts定義的類名為LoggerService
• 管道：比如address.pipe.ts定義的類名為AddressPipe
• 指令：比如highlight.directive.ts定義的類名為HighlightDirective
• 類型：按模塊來劃分，一個.model.ts定義多個類型
• 數據：比如address-book.data.ts定義的變數名為addressBook
• 腳本啟動入口的文件名規定為main.ts，裡面不包括任何業務邏輯，但要記得處理失敗的情況

// main.tsimport { platformBrowserDynamic } from @angular/platform-browser-dynamic;import { AppModule } from ./app/app.module;platformBrowserDynamic().bootstrapModule(AppModule) .then(success => console.log(`Bootstrap success`)) .catch(err => console.error(err));

• 指令選擇器的命名採用小寫駝峰規則，比如clickOutSide
• 組件選擇器的命名採用分隔符「-」連接小寫字母的形式，比如hero-list

代碼規範

• 類命名採用大寫駝峰規則
• 常量定義用const，並且全部大寫，如果有多個單詞，用「_」連接，比如HERO_URL
• 支持ES6的環境下，禁止使用var定義變數
• 變數命名盡量控制在3個單詞以內，有常見縮寫形式的單詞可採用縮寫形式
• 介面類型用大寫駝峰規則，不建議以I為前綴，考慮用類代替介面
• 屬性和方法名用小寫駝峰，私有屬性和方法不建議以「_」為前綴
• 建議用空一行的方式來區分第三方庫的導入和項目本身文件的導入

項目結構

• 好的項目結構的準則就是快速定位，快速識別，儘可能保持扁平，不要寫冗餘／重複代碼
• 把所有項目代碼放入src文件夾，為每個特性創建文件夾
• 第三方庫放在src外的一個文件夾
• 每個組件、服務、管道、指令都獨成一個文件
• 當組件有多個附屬文件時（htm，css，ts，spec.ts），建議創建一個獨立的文件夾

模塊

• 在src/app下創建根模塊，建議命名為app.module.ts
• 為每個特性創建一個模塊，並且保持文件夾命名和模塊命名一致
• 共享模塊建議用SharedModule命名，放在app/shared/shared.module.ts中
• 在共享模塊中定義復用的組件、指令和管道，避免在共享模塊中定義服務
• 在共享模塊中導入所有必需的模塊，比如CommonModule和FormsModule，導出所有復用的模塊、組件、指令、管道
• 考慮將只用一次的類放在核心特性模塊中，並且僅在根模塊中導入，建議寫guard.ts來保證
• 核心特性模塊建議用CoreModule命名，放在app/core/core.module.ts中
• 將單例服務放在核心特性模塊中，比如ExceptionService和LoggerService
• 在核心特性模塊中導入所有必需的模塊，比如CommonModule和FormsModule，導出所有定義的組件，服務等
• 將全局僅用一次的組件放在核心特性模塊，然後只在AppModule中導入，比如NavComponent和SpinnerComponent
• 獨立的特性模塊可以做成懶載入模塊，避免在任何地方導入懶載入模塊，不然模塊就會直接載入

組件

• 當模板／樣式超過3行時，寫成單獨文件
• 刪除無樣式定義的樣式文件
• 模板／樣式的定義與組件命名保持一致
• 導入時使用相對路徑
• 用裝飾器@Input和@Output來修改輸入輸出數據，而不是使用元數據中的inputs和outputs屬性
• 不推薦重命名輸入輸出數據
• 按照變數，構造器，生命周期函數，一般方法的順序定義；一般方法按頁面的功能模塊放一起，被調用的方法寫在後面；變數和方法均先公有後私有排列；
• 組件中只寫跟視圖相關的邏輯，把其他的業務邏輯放在服務中
• 將可復用的業務邏輯放在服務中
• 不推薦事件命名加上on前綴
• 將展示邏輯放在組件的類中，而不是在模板中

指令

• 當有跟模板無關的展示邏輯時，使用屬性指令，比如[highlight]指令
• 推薦使用@HostListener和@HostBinding，而不是元數據的host屬性

服務

• 保持單例服務的使用規則，服務用來在特性模塊或者應用中共享數據和方法
• 跟函數一樣，一個服務只有一個目的
• 把服務注入在最高層的組件／模塊中，使得該單例服務能在子組件、子模塊中共享
• 使用@Injectable裝飾服務類，而不是@Inject裝飾參數
• 跟數據相關的操作，比如xhr請求，本地儲存等抽象成服務

生命周期

• 需要生命周期鉤子時，實現相關的介面，可有效防止錯誤

輔助工具

• 用codelyzer來保持代碼遵守該指南，當然你可以根據自己情況調整
• 使用IDE的代碼片段工具來快速生成具有一致性的代碼片段，比如給VS Code安裝snippets

本文首發知乎，不當之處歡迎指正。