Angular 的安裝和使用

本文內容概要：

• 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/pages 目錄下建立新組件

 

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