4. AngularJS
User Group Taiwan
妥善規劃 Angular 應用程式
• 規劃功能清單 ( Function List )
• 規劃網站地圖 ( Sitemap )
• 規劃網頁線稿 ( Wireframe )
• 網頁設計提案 ( Visual Design )
• 網頁前端切版 ( Front-end Design )
5. AngularJS
User Group Taiwan
• 建立 Angular 專案 ( Angular CLI )
• ng new myapp --routing
• 建立 Angular 模組 (依據網站地圖分組)
• ng g m module1 --routing -m=app
• 建立 Angular 元件 (依據網站地圖中的每個頁面)
• ng g c module1/page1 -m=module1
開始打造 Angular 應用程式雛形
6. AngularJS
User Group Taiwan
• 依據實際需求建立必要的 Angular 元件 (每個模組都切乾淨)
• cd src/app/module1
• ng g c page1
• ng g d diretive1
• ng g p pipe1
• ng g s common -m=module1
• 定義模組下的路由、子路由、路由守門員
• 所有模組都擁有自己的路由、子路由、路由守門員
• ng g g login -m=module1
• 先將所有頁面都串起來
• 共通的版型都先套用在 AppComponent 下,最後再來調整整體版面
• 全站的路由連結都先套用完成
依據模組進行工作切割與專案分工
7. AngularJS
User Group Taiwan
• 程式碼風格檢查
• codelyzer (GitHub)
• ng lint
• TSLint (Visual Studio Code)
• npm install --save-dev codelyzer@latest
• 單元測試開發
• Karma
• Jasmine v.s. Jest
• Protractor
• https://angular.io/guide/testing
驗證 Angular 專案品質
14. AngularJS
User Group Taiwan
import { ErrorHandler } from '@angular/core';
class MyErrorHandler implements ErrorHandler {
handleError(error) {
// do something with the exception
}
}
@NgModule({
providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
})
class MyModule {}
自訂 Angular 錯誤處理器 ( ErrorHandler )
15. AngularJS
User Group Taiwan
• Angular CLI
• TSLint - An extensible linter for the TypeScript language. ( Rules )
• codelyzer (GitHub)
• Angular - Testing
• Setting up a CI pipeline for deploying your Angular application to
Azure using Visual Studio Team Services and GitHub
• Angular - ErrorHandler
相關連結
16. AngularJS
User Group Taiwan
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
• http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
• http://www.facebook.com/will.fans
• Will 保哥的噗浪
• http://www.plurk.com/willh/invite
• Will 保哥的推特
• https://twitter.com/Will_Huang
聯絡資訊