前端開發(fā)離不開的Angular
作為Google公司提供的一套開源的項目框架，Angular的模版功能強大且豐富，是一個比較完善的前端框架，包含服務，模版，數(shù)據(jù)雙向綁定，模版化，路由，過濾器，自定義指令，依賴注入等所有功能，ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對于敏捷開發(fā)的團隊來說非常有幫助。
同時該工具的核心功能就是對現(xiàn)有HTML編碼以指令方式進行擴展，并使擴展后的HTML編碼可以通過使用元素聲明的方式來構建動態(tài)內(nèi)容。因此，這樣的擴展具有劃時代的意義，這也是Angular框架自誕生起就備受關注的重要原因。
在搭建Angular框架之前，讓我們先來了解一下這個前端框架的特性和優(yōu)勢，首先Angular會把你的模版轉換成代碼，針對現(xiàn)代JavaScript虛擬機進行高度優(yōu)化，輕松獲得框架提供的高生產(chǎn)率，同時也可以借助新的組件路由器，Angular可以實現(xiàn)快速加載，自動代碼拆分機制可以讓用戶僅僅加載那些用于渲染所請求頁面的代碼，提升速度與性能。
了解了特性和性能，馬上來看看如何具體進行前端框架搭建吧！
一、搭建本地開發(fā)環(huán)境
? Node.js Angular 需要 Node.js 的活躍 LTS 版或維護期 LTS版。關于具體版本需求，參閱 package.json 文件中的 engines。要了解如何安裝 Node.js，參閱 nodejs.org。 如果你不確定系統(tǒng)中正在運行的 Node.js 版本是什么，請在終端窗口中運行 node -v。
? npm 包管理器Angular、Angular CLI 以及 Angular 應用都要依賴 npm 包來實現(xiàn)很多特性和功能。要下載并安裝 npm 包，你需要一個 npm 包管理器。本指南使用 npm 客戶端命令行界面，該界面默認安裝在 Node.js。要檢查你是否安裝了 npm 客戶端，請在終端窗口中運行 npm -v 。
? 你可以使用 Angular CLI 來創(chuàng)建項目，生成應用和庫代碼，以及執(zhí)行各種持續(xù)開發(fā)任務，比如測試、打包和部署。
要使用 npm 命令安裝 CLI，請打開終端/控制臺窗口，輸入如下命令：
npm inatll -g @angula
二、創(chuàng)建新的工作區(qū)和一個初始應用
Angular 的工作區(qū)就是你開發(fā)應用所在的上下文環(huán)境。一個工作區(qū)包含一個或多個項目所需的文件。 每個項目都是一組由應用、庫或端到端（e2e）測試組成的文件集合。 在本教程中，你將創(chuàng)建一個新的工作區(qū)。
要想創(chuàng)建一個新的工作區(qū)和一個初始應用項目，需要：
確保你現(xiàn)在沒有位于 Angular 工作區(qū)的文件夾中。例如，如果你之前已經(jīng)創(chuàng)建過 "快速上手" 工作區(qū)，請回到其父目錄中。
-
運行 CLI 命令 ng new，空間名請使用 angular-tour-of-heroes，如下所示：
ng new angular-tour-of-heroes ng new 命令會提示你輸入要在初始應用項目中包含哪些特性，請按 Enter 或 Return 鍵接受其默認值。
Angular CLI 會安裝必要的 Angular npm 包和其它依賴項。這可能需要幾分鐘。
它還會創(chuàng)建下列工作區(qū)和初始項目的文件：
? 新的工作區(qū)，其根目錄名叫 angular-tour-of-heroes。
? 一個最初的骨架應用項目，位于 src/app 子目錄下。
? 相關的配置文件。
初始應用項目是一個簡單的 "歡迎" 應用，隨時可以運行它。
三、啟動應用服務器
進入工作區(qū)目錄，并啟動這個應用。
cd angular-tour-of-heroes
ng serve --open
ng serve 命令會構建本應用、啟動開發(fā)服務器、監(jiān)聽源文件，并且當那些文件發(fā)生變化時重新構建本應用。
--open 標志會打開瀏覽器，并訪問 http://localhost:4200/。
你會發(fā)現(xiàn)本應用正運行在瀏覽器中。
參考文獻：Angular官網(wǎng)
云平臺一鍵部署Angular
1.創(chuàng)建環(huán)境
想要一鍵部署Angular，需要以下賬號和服務：
? Github賬號 (https://github.com/)，
? 阿里云賬號，并使用阿里云賬號登錄云開發(fā)平臺 (https://workbench.aliyun.com/)，為保證最好的使用體驗，請使用Chrome瀏覽器。開通OSS服務。
? 未開通阿里云OSS的用戶，點擊鏈接 (https://workbench.aliyun.com/product/open?code=oss)開通OSS服務。OSS開通免費，有一定的免費額度，超過額度之后按量付費。
[圖片上傳失敗...(image-7cc249-1646718326133)]
2.創(chuàng)建Angular應用
? 創(chuàng)建前端應用。打開快速開始 https://workbench.aliyun.com/app，找到Angular點擊創(chuàng)建「創(chuàng)建應用」按鈕。
[圖片上傳失敗...(image-254e70-1646718326133)]
? 云資源訪問授權。如果您之前沒有使用過云開發(fā)平臺，會出現(xiàn)云資源授權管理的選項，往下拉出現(xiàn)直至同意授權的字樣，點擊「同意授權」后出現(xiàn)授權成功，點擊進入「下一步」。
[圖片上傳失敗...(image-36e1c4-1646718326133)]
? 綁定Github賬號。授權完成后選擇來源倉庫為Github，按照提示點擊去綁定，綁定GitHub帳號，登錄后并點擊Authorize Aliyunworkben允許云開發(fā)平臺構建、發(fā)布你的GitHub代碼為可訪問的網(wǎng)站。
[圖片上傳失敗...(image-49abe4-1646718326133)]
? 選擇fork好的“Angular”代碼倉庫。選擇第一步中的代碼倉庫，主干分支，并點擊下一步。主干分支一般指的是代碼的master或main等分支。
[圖片上傳失敗...(image-43615c-1646718326133)]
填寫基本信息，完成創(chuàng)建。填寫基本信息并點擊「完成」。成功后進入到應用詳情和部署界面。
[圖片上傳失敗...(image-1be9e2-1646718326133)]
3.在日常環(huán)境部署
? 一鍵進行應用部署。在應用詳情頁面點擊日常環(huán)境的「部署」按鈕進行一鍵部署，部署狀態(tài)變成綠色已部署以后可以點擊訪問部署網(wǎng)站查看效果。
[圖片上傳失敗...(image-7dabb4-1646718326133)]
? 訪問Angular網(wǎng)站。日常環(huán)境的測試域名也是可以訪問的，點擊訪問已部署網(wǎng)站按鈕會出現(xiàn)一個彈出，點擊彈出上的立即訪問就能夠訪問已經(jīng)部署好的站點了。在部署完成后，可以繼續(xù)本地編碼，并將代碼push到應用的“基本信息”中對應的代碼倉庫內(nèi)。
[圖片上傳失敗...(image-a6617f-1646718326133)]
