本文內容概要：
- angular簡單介紹
- 安裝angular的依賴環境
- angular的簡單應用（創建項目+組件+module+service+class）
- 組件中主要文件的介紹
介紹
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的簡單應用（創建項目+component+module+service+class）
- 使用腳手架工具初始化創建項目
ng new angular-demo（angular-demo：項目名稱）
Angular CLI 將會自動幫我們把目錄結構創建好，並且會自動生成一些目錄文件。如下圖所示：
注意：這里自動下載第三方包的依賴文件時通過快捷鍵CTRL+C打斷，不要自動下載，這樣很可能會出錯，我們通過cnpm手動去安裝就好。
cd angular-demo
cnpm install || cnpm i
- 啟動angular應用程序（Server the application）
使用腳手架工具初始化項目完成之后，就可以啟動開發模式了。
ng serve //或者 npm start
注意：
- 在項目根目錄下執行
- 是 serve 不是server，我就經常手誤輸錯。
- 該命令默認會開啟一個服務器占用4200端口，如果想要修改可以通過 --port 參數來指定，例如 ：
ng server --port 5000
如上圖所示，我們在進行項目編寫的時候，所有的編寫文件基本都在src目錄文件下。
- 使用命令在 src/app/pages 目錄下創建新組件（component）
ng generate component NewComponentName || ng g component 組件名稱 //NewComponentName 新組建名稱
- 使用 Angular CLI 創建一個新模塊(module)
ng generate module 模塊名稱 || ng g module 模塊名稱
-
使用 Angular CLI 創建一個新服務(service)
ng generate service 服務名稱
|| ng g service 服務名稱
-
使用 Angular CLI 創建一個簡易的模型類(class)
ng generate class 類名稱
組件中主要文件的介紹
- main.ts
- 這個文件就是模塊化啟動入口，負責加載啟動根模塊。
主要是去加載app目錄下的組件，如下圖所示：
- component.ts文件
- 而我們主要關注的就是此核心文件 ----- 項目的根組件。在angular中組件就是一個類。
- @component 組件的裝飾器
- selecor 用來定義組件渲染的標簽名稱，說白了就是組件的名字
- templateUrl 用來指定組件的模板文件
- styleUrls 一個數組，用來存放組件相關的樣式文件
- HTML文件
上圖中{{ }}中的 title 對應的便是component.ts中的 title 。（圖中的綠色部分）
- moudle文件
- 項目的根模塊。負責把組件、服務、路由、指令等組織到一起，設置啟動組件為根組件。
目錄結構
npm scripts 介紹
原文件如下圖所示：
以上內容只是一個簡單的介紹，具體以angular官網文檔為准：https://angular.cn/docs