本文內容概要：

• angular簡單介紹
• 安裝angular的依賴環境
• angular的簡單應用（建立專案+元件）
• 元件中主要檔案的介紹

介紹

Angular是一套用於構建使用者介面的JavaScript框架。有Google開發和維護，主要用來開發單頁面應用程式。類似於vue.js。

特性

• MVVM（資料驅動檢視思想）
• 元件化
• 模組化
• 指令
• 服務
• 依賴注入
• Typescript
• 、、、、、、

現狀

目前，無論我們使用什麼前端框架，都必然要使用到各種NodeJS工具，angular也不列外。與其它框架不同，angular從一開始就走的“全家桶”式的設計思路，因此 @angular/cli 這款工具裡面集成了日常開發需要使用的所有Node模組，使用@angular/cli 可以大幅度降低搭建開發環境的難度。

安裝依賴環境

安裝Node.js

• 下載地址：https://nodejs.org/en/download/
• 安裝後在cmd中輸入：node -v 確認Node.js環境

安裝npm

• npm會隨著node的安裝一起被安裝。
• 在cmd中輸入npm -v 確認npm環境。

由於@angular/cli同時依賴python，故同樣需要安裝python的執行環境，這裡不多做贅述。

安裝c++編譯工具

• @angular/cli在Windows上同時依賴c++編譯工具，所以也需要單獨安裝Visual Studio。
• 執行下面的命令安裝c++編譯工具：

npm install --global --production windows-build-tools

安裝cnpm

cnpm是國內淘寶為了解決npm安裝過慢而產生的映象，因為npm安裝是通過外網下載的，很多時候容易安裝失敗，故建議用cnpm，當然不是必須的。

npm i -g cnpm --registry=https://registry.npm.taobao.org

安裝 @angular/cli

Angular CLI是Angular官方開發的一個類似與Vue CLI的腳手架開發工具，它幫我們集成了webpack打包、開發伺服器、單元測試、自動編譯、部署等功能。

cnpm i -g @angular/cli

安裝後在cmd中輸入 ng --version 確認是否安裝成功。

安裝失敗解決方案

• 在Windows平臺上安裝@angular/cli會報很多error，那是因為@angular/cli 在Windows平臺上面依賴python和Visual Studio 環境，而很多開發者並不一定安裝了這些。
• 以及node-sass模組被牆的問題，強烈推薦使用cnpm進行安裝，可以非常有效地避免撞牆。
• 如果安裝失敗，請手動把全域性的@angular/cli 刪掉：

  cnpm uninstall -g @angular/cli

• 如果node_modules刪不掉，爆出路徑過長之類的錯誤，請嘗試用一些檔案粉碎機之類的工具強行刪除。
• 其實無論用什麼開發環境，安裝的過程中請仔細看錯誤日誌。

Angular的簡單應用（建立專案+模板）

• 使用腳手架工具初始化專案

ng new angular-demo

Angular CLI 將會自動幫我們把目錄結構建立好，並且會自動生成一些目錄檔案。如下圖所示：

注意：這裡自動下載第三方包的依賴檔案時通過快捷鍵CTRL+C打斷，不要自動下載，這樣很可能會出錯，我們通過cnpm手動去安裝就好。

cd angular-demo
cnpm install

• 啟動angular應用程式（Server the application）

使用腳手架工具初始化專案完成之後，就可以啟動開發模式了。

ng serve

//或者  npm start

注意：

• 在專案根目錄下執行
• 是serve 不是server，我就經常手誤輸錯。
• 該命令預設會開啟一個伺服器佔用4200埠，如果想要修改可以通過 --port 引數來指定，例如 ：

ng server --port 5000

如上圖所示，我們在進行專案編寫的時候，所有的編寫檔案基本都在src目錄檔案下。

• 使用命令在 src/app 目錄下建立新元件

ng generate component NewComponentName
//NewComponentName 新組建名稱

元件中主要檔案的介紹

• main.ts
• 這個檔案就是模組化啟動入口，負責載入啟動根模組。

主要是去載入app目錄下的元件，如下圖所示：

• component.ts檔案
• 而我們主要關注的就是此核心檔案 ----- 專案的根元件。在angular中元件就是一個類。
• @component 元件的裝飾器
• selecor 用來定義元件渲染的標籤名稱，說白了就是元件的名字
• templateUrl 用來指定元件的模板檔案
• styleUrls 一個數組，用來存放元件相關的樣式檔案

• HTML檔案

上圖中{{ }}中的 title 對應的便是component.ts中的 title 。（圖中的綠色部分）

• moudle檔案
• 專案的根模組。負責把元件、服務、路由、指令等組織到一起，設定啟動元件為根元件。

目錄結構

npm scripts 介紹

原檔案如下圖所示：

以上內容只是一個簡單的介紹，具體以angular官網文件為準：https://angular.cn/docs