【Angular學習】(一)專案環境
引入
AngularJS是一個JavaScript框架，可以直接通過script引入
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
通常放在<body>標籤中的最底部，以免發生阻塞。
開發環境搭建
先通過一個demo來熟悉angular的使用。
首先確保開發環境中已經安裝了npm和node.js。
安裝angular-cli
npm install -g @angular/cli
這是angular框架的腳手架，幫我們建立專案。
安裝typescript
npm install -g typescript
這是Angular框架中預設使用的JS語法。
不過在新建專案時也會自動下載，所以這步也可以跳過。
新建專案
ng new angular-demo
這裡就是angular cli在幫我們搭建整個專案了，過程稍長，因為要下載模版和一些依賴。
如果是已經建好了專案的資料夾，也可以直接在控制檯進入該資料夾然後ng init angular-demo
啟動專案
進入專案目錄
cd angular-demo
啟動
ng serve --open
這樣就會自動在瀏覽器中開啟專案了。
預設是使用4200埠，若想要更改埠號的話
ng serve --port 4201
還有一些其他的ng serve命令：
--dry-run: boolean, 預設為 false, 若設定 dry-run 則不會建立任何檔案
--verbose: boolean, 預設為 false
--link-cli: boolean, 預設為 false, 自動連結到 @angular/cli 包
--skip-install: boolean, 預設為 false, 表示跳過 npm install
--skip-git: boolean, 預設為 false, 表示該目錄不初始化為 git 倉庫
--skip-tests: boolean, 預設為 false, 表示不建立 tests 相關檔案
--skip-commit: boolean, 預設為 false, 表示不進行初始提交
--directory: string, 用於設定建立的目錄名，預設與應用程式的同名
--source-dir: string, 預設為 ‘src’, 用於設定原始檔目錄的名稱
--style: string, 預設為 ‘css’, 用於設定選用的樣式語法 (‘css’, ‘less’ or ‘scss’)
--prefix: string, 預設為 ‘app’, 用於設定建立新元件時，元件選擇器使用的字首
--mobile: boolean, 預設為 false,表示是否生成 Progressive Web App 應用程式
--routing: boolean, 預設為 false, 表示新增帶有路由資訊的模組，並新增到根模組中
--inline-style: boolean, 預設為 false, 表示當建立新的應用程式時，使用內聯樣式
--inline-template: boolean, 預設為 false, 表示當建立新的應用程式時，使用內聯模板
angular-cli命令
ng generate class my-new-class // 新建 class
ng generate component my-new-component // 新建元件
ng generate directive my-new-directive // 新建指令
ng generate enum my-new-enum // 新建列舉
ng generate module my-new-module // 新建模組
ng generate pipe my-new-pipe // 新建管道
ng generate service my-new-service // 新建服務
單元測試
ng test
angular-cli預設配置了karma測試框架
端到端測試
ng e2e
打包專案
ng build
注意
建立專案時，node-sass模組可能下載失敗，npm 安裝 node-sass 依賴時，會從 github.com 上下載 .node 檔案。由於國內網路環境的問題，這個下載時間可能會很長，甚至導致超時失敗。
可以更換npm為淘寶源的cnpm下載。