SlideShare uma empresa Scribd logo
1 de 17
AngularJS
User Group Taiwan
優化 Angular 團隊開發流程:
實現 DevOps 開發維運一體化
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格:http://blog.miniasp.com/
AngularJS
User Group Taiwan
關於 DevOps 的不同階段
AngularJS
User Group Taiwan
優化 Angular 開發流程
Plan  Create  Verify
AngularJS
User Group Taiwan
妥善規劃 Angular 應用程式
• 規劃功能清單 ( Function List )
• 規劃網站地圖 ( Sitemap )
• 規劃網頁線稿 ( Wireframe )
• 網頁設計提案 ( Visual Design )
• 網頁前端切版 ( Front-end Design )
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 應用程式雛形
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 下,最後再來調整整體版面
• 全站的路由連結都先套用完成
依據模組進行工作切割與專案分工
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 專案品質
AngularJS
User Group Taiwan
優化 Angular 部署流程
Package  Release  Configuration
AngularJS
User Group Taiwan
• 切換建置環境
• npm run build
• npm run build -- --prod
• npm run build-prod (需自訂 package.json 的 scripts 命令)
• 多重應用程式
• ng build --app 0 (須配合調整 .angular-cli.json 設定檔)
• 佈署虛擬目錄
• ng build --prod --base-href /myapp/
• ng build --prod --base-href /myapp/ --deploy-url=/myapp/
建置 Angular 部署檔案
AngularJS
User Group Taiwan
• 準備一個 Visual Studio Team Services 專案 (Git 儲存庫)
• 建立一個 Azure Web App 網站
• 透過 Git 上傳 Angular 專案到 Visual Studio Team Services
• 設定 Builds 持續整合 (CI)
• 設定 Releases 持續部署 (CD)
實現 Angular 持續整合/持續部署
AngularJS
User Group Taiwan
• npm install
• npm run lint
• npm run build
• Publish Build Artifact
• Path to Publish: dist
• Artifact Name: drop
• Artifact Type: Server
在 VSTS 設定 Builds 持續整合 (CI)
AngularJS
User Group Taiwan
• Azure App Service Deployment
• Azure subscription:
• App Service name:
• Package or folder:
$(System.DefaultWorkingDirectory)/ngdevops-CI/drop
在 VSTS 設定 Releases 持續部署 (CD)
AngularJS
User Group Taiwan
優化 Angular 監控作業
Monitoring
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 )
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
相關連結
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
聯絡資訊
AngularJS
User Group Taiwan
Thank you

Mais conteúdo relacionado

Destaque

Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Will Huang
 
git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用Will Huang
 
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略Will Huang
 
Growth Mindset 經驗分享
Growth Mindset 經驗分享Growth Mindset 經驗分享
Growth Mindset 經驗分享Will Huang
 
簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )Will Huang
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)Will Huang
 
開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽Will Huang
 
Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Will Huang
 
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革Will Huang
 
中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技Will Huang
 
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWindows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWill Huang
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式Will Huang
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例Will Huang
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技Will Huang
 
從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術Will Huang
 

Destaque (15)

Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)
 
git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用
 
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
 
Growth Mindset 經驗分享
Growth Mindset 經驗分享Growth Mindset 經驗分享
Growth Mindset 經驗分享
 
簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
 
開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽
 
Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰
 
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
 
中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技
 
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWindows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, Kubernetes
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
 
從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術
 

Mais de Will Huang

深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)Will Huang
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索Will Huang
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!Will Huang
 
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧Will Huang
 
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)Will Huang
 
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)Will Huang
 
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Will Huang
 
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點Will Huang
 
RxJS 6 新手入門
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門Will Huang
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)Will Huang
 
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)Will Huang
 
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Will Huang
 
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)Will Huang
 
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Will Huang
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Will Huang
 
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)Will Huang
 
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)Will Huang
 
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)Will Huang
 
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)Will Huang
 
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)Will Huang
 

Mais de Will Huang (20)

深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
 
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
 
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
 
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
 
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
 
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點
 
RxJS 6 新手入門
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
 
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
 
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
 
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
 
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
 
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
 
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
 
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
 
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
 
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
 

Último

函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 

Último (15)

函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 

優化 Angular 團隊開發流程:實現 DevOps 開發維運一體化

  • 1. AngularJS User Group Taiwan 優化 Angular 團隊開發流程: 實現 DevOps 開發維運一體化 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  • 2. AngularJS User Group Taiwan 關於 DevOps 的不同階段
  • 3. AngularJS User Group Taiwan 優化 Angular 開發流程 Plan  Create  Verify
  • 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 專案品質
  • 8. AngularJS User Group Taiwan 優化 Angular 部署流程 Package  Release  Configuration
  • 9. AngularJS User Group Taiwan • 切換建置環境 • npm run build • npm run build -- --prod • npm run build-prod (需自訂 package.json 的 scripts 命令) • 多重應用程式 • ng build --app 0 (須配合調整 .angular-cli.json 設定檔) • 佈署虛擬目錄 • ng build --prod --base-href /myapp/ • ng build --prod --base-href /myapp/ --deploy-url=/myapp/ 建置 Angular 部署檔案
  • 10. AngularJS User Group Taiwan • 準備一個 Visual Studio Team Services 專案 (Git 儲存庫) • 建立一個 Azure Web App 網站 • 透過 Git 上傳 Angular 專案到 Visual Studio Team Services • 設定 Builds 持續整合 (CI) • 設定 Releases 持續部署 (CD) 實現 Angular 持續整合/持續部署
  • 11. AngularJS User Group Taiwan • npm install • npm run lint • npm run build • Publish Build Artifact • Path to Publish: dist • Artifact Name: drop • Artifact Type: Server 在 VSTS 設定 Builds 持續整合 (CI)
  • 12. AngularJS User Group Taiwan • Azure App Service Deployment • Azure subscription: • App Service name: • Package or folder: $(System.DefaultWorkingDirectory)/ngdevops-CI/drop 在 VSTS 設定 Releases 持續部署 (CD)
  • 13. AngularJS User Group Taiwan 優化 Angular 監控作業 Monitoring
  • 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 聯絡資訊

Notas do Editor

  1. https://en.wikipedia.org/wiki/DevOps
  2. Import Module while generating Submodule with --routing uses RoutingModule #6533 https://github.com/angular/angular-cli/issues/6533