開發工具:windows ,Vscode, npm, css
前提:安裝nodejshtml
nodejs 模塊全局安裝路徑配置:http://www.cnblogs.com/rancho-blog/p/6567929.html(個人另一遍)node
nodejs下載地址:https://nodejs.org/en/npm
vscode下載地址:https://code.visualstudio.com/json
1.全局安裝angular-cli: npm install angular-cli -gwindows
npm 設置淘寶鏡像 : npm config set registry "https://registry.npm.taobao.org/"瀏覽器
其中node-sass 的包有可能會下載失敗由於國內的網絡緣由,能夠在npm config 中的proxy 設置代理, 或者將registry 設置爲淘寶地址,安裝完成大概就是下圖這樣一個樣子。會有不少不少包sass
2.查看是否安裝成功: ng -v網絡
3.使用cli 新建項目工程 ng new project-nameapp
4.生成項目結構圖:
5.對項目結構主要內容解釋以下:(本文對於單元以及集成測試測試沒有說明, 若想了解請到http://www.protractortest.org/#/ 查看專門爲angular設計的集成測試)
e2e ------------------------------用於測試(本文對於測試不會涉及)
node_modules------------------存放依賴包的地方
src--------------------------------存放源代碼
app----------------------------根模塊
app.component.css------樣式文件
app.component.html---模板
app.component.spec.ts-測試
app.component.ts-------組件
app.module.ts------------模塊
environments----------------環境
environment.prod.ts----生產環境
environment.ts----------非生產環境
index.html-------------------宿主頁面
mian.ts-----------------------程序引導
tsconfig.json-----------------編譯配置
angular-cli.json--------------angular-cli配置
package.json----------------依賴包以及npm的命令
6.運行程序 ng serve 在瀏覽器上輸入localhost:4200
7 在ng serve 後面加上 --prod -aot 從新運行
(ng serve --prod --aot) 與之間的對比 (ng serve) size會小一些