第一步
安裝全局的angular-cli, npm install -g @angular/cli
或者 cnpm install -g @angular/cli@v1.0.0-rc.2
– 國內淘寶源(cnpm的安裝自行搜索)
或者 yarn add global @angular/cli
第二步
查看各插件是否已經安裝,ng -v會出來一堆東西,如第一個圖git命令所示!
第三步
生成項目 代碼為:ng new 項目名稱
angular-cli可以初始化ng2或者ng4的項目,我這里說2+;
腳手架的命令很多,我這里只列出最常用的;
- 新建東東
范圍 | 命令 | 作用 |
---|---|---|
new | ng new new_project | 初始化新項目 |
Component | ng g component my-new-component | 新建一個組件 |
Directive | ng g directive my-new-directive | 新建一個指令 |
Pipe | ng g pipe my-new-pipe | 新建一個管道 |
Service | ng g service my-new-service | 新建一個服務 |
Class | ng g class my-new-class | 新建一個類 |
Interface | ng g interface my-new-interface | 新建一個接口 |
Enum | ng g enum my-new-enum | 新建一個枚舉 |
Module | ng g module my-module | 新建一個模塊 |
- 測試及檢測
范圍 | 命令 | 作用 |
---|---|---|
e2e | ng e2e | 跑自動化測試-自己寫測試測試用例 |
test | ng test | 跑單元測試 – 自己寫 |
lint | ng lint | 調用tslint跑整個項目,可以收獲一堆警告和錯誤,–force –fix –format可以幫助格式和修復部分問題 |
第四步
現在已經創建完成了,cd進入項目,會看到一些這樣的東西,說明已經創建完成了,接下來就是執行項目就可以了,跟vue2.0一樣,此時執行用到的代碼為:ng serve --open(和vue的npm run dev效果是一樣,自動監聽修改內容),這一點也是不同於angularjs(官方稱1.x為angularjs,過了2.0就直接稱為angular)
最后執行完之后就會彈出來一個頁面,就是要生成的頁面了
其他:
- 打包
ng build
: 開發模式打包,調用的環境文件是/src/environments/environments.ts
; ng build --prod
: 以前調用aot打包還需要帶上--aot
,從beta31開始,--prod
模式下自動調用aot打包,
調用的環境文件是/src/environments/environments.prod.ts
- 彈出配置文件(還原真實的配置文件)
ng eject
: 這個東西的配置很多,可以彈出各種各樣的源配置和文件
我們看到的ng
開頭的命令都是二重封裝的。。。有時候我們想要改源文件或者看到原始配置是怎么樣的這貨就用到了
- 這個腳手架支持sass和less,手動改下
.angular-cli.json
就可以了,或者執行命令改下支持; - 當然可以配置接口反向代理,推薦還是把不同接口的url寫在不同的environment里面,用
nginx
做反向代理!ng serve --proxy-config proxy.conf.json
配置反向代理(用webpack)這個老版本是支持的,現在不知道支不支持,寫法如下
{
"/": { "target": "http://localhost:3000", "secure": false } }
好了,那么基本的搭建已經完成了,去試試吧!