大家好，請關注我的新作
multipages-generator今日發布??！媽媽再也不用擔心移動端h5網站搭建了！
前言：
本文適合Angular2的初學者閱讀；
時下web前端發展迅猛，新框架層出不窮，大家都知道三駕馬車VueJS，Angular2，React。國內VueJS非常熱門，百度熱點趨勢以1000%的漲幅在增加。Angular2在國外非常受歡迎，在國內的粉絲還非常少，文章不多，究其原因有這么幾點主要是學習曲線陡峭，上手困難，（1）angular本身概念難懂，（2）使用typescript開發，用到很多es6特性；（3）配置太多，復雜，工程架構搭建上手難度大。本文為了解決項目搭建的問題，詳細的一步步演示了如何搭建angular2項目；
為什么選擇Angular CLI？
在開發中，搭建一個良好的前端架構非常重要，他對后續的開發，維護，團隊協作，易讀性具有重要意義；
生產中搭建Angular2的前端架構一般有三種選擇：
第一種是自己一點點的搭建，這種對開發者要求比較高，必須對框架具有很深入的理解和很豐富的使用經驗，否則搭建起來會遇到非常多的問題；
第二種是直接使用Angular2 seed，一些國外優秀程序員在github上已經貢獻了，非常感激！我本人也站在前人的基礎上加上了一些自己的內容，構建了一套腳手架，初學者們可以拿來即用，后面不斷的去理解其中原委。hotshots-angular2-webpack-seed；這里面用刀了懶加載，webpack code splitting，涵蓋angular2的很多知識點；
第三種就是本文要講的使用angular2提供的Angular CLI來快速搭建，他本質也是使用了webpack來編譯，打包，壓縮等構建的事情，適合想用webpack的特性又不想學習webpack那些復雜的配置的開發者；
利弊：使用Angular CLI可以很快，很簡單的構建angular2項目，只要掌握幾行命令就能構建出前端架構的最佳實踐，讓人驚嘆！不好的一面，簡單的東西就意味著不靈活，如果你想高可控的配置你的項目，還是建議選擇第二種方案；在本文寫的這個時間（2016-12-2），Angular CLI還處于beta階段，還只能用來自娛自樂，還不能用在生產中；
AngularCLI主要特性
1 Angular CLI 可以快速搭建框架，創建module，service，class，directive等；
2 具有webpack的功能，代碼分割（code splitting），按需加載；
3 代碼打包壓縮；
4 模塊測試，端到端測試；
5 熱部署，有改動立即重新編譯，不用刷新瀏覽器；而且速度很快
6 有開發環境，測試環境，生產環境的配置，不用自己操心；?
7 sass，less的預編譯Angular CLI都會自動識別后綴來編譯；
8 typescript的配置，Angular CLI在創建應用時都可以自己配置；
9 在創建好的工程也可以做一些個性化的配置，webpack的具體配置還不支持，未來可能會增加；
10 Angular CLI創建的工程結構是最佳實踐，生產可用；
開始搭建，基礎工具的安裝：
你需要安裝NodeJS 5.0以上版本,NPM 3.0以上版本；WebStorm 11；
安裝 Angular CLI
windows： npm install -g angular-cli
macOS: sudo npm install -g angular-cli
創建Angular2工程
注：本文的工程代碼https://github.com/linweiwei123/hotshots-angular2-cli-demo
ng new project_name ,project_name是你的項目名；
上圖就是創建的過程，此時在創建中，npm也在下載相關的包，耐心等待；從控制臺中可以看到創建的內容；
工程結構圖如下：
就這樣，最簡單的angular2工程創建好了；
工程結構熟悉一下：angular-cli.json 是angular-cli的配置文件，測試配置文件karma.conf.js，typescript的lint配置文件，端到端的測試配置文件protractor.conf.js，導入es6模塊的配置文件polyfills.ts，angular工程的main.ts引導啟動文件，全局樣式style.css，typescript配置文件ts.config.json;typescript的聲明文件typings.d.ts,以及生成了最賤的的一個angular組建 app.components相關的css，html，ts。這些配置都是angular2的生產項目中需要配置的文件，angular-cli幫我們做了這么多事情，我們只用了一個命令；
啟動
cd project_name?
ng serve
瀏覽器輸入 http://localhost:4200/ 就可以看到app works！
嘗試的修改一下app.component.ts中的文字，看看熱部署是否馬上生效？yes！it does！
創建module，component，service，class
創建一個home的module；
?ng g component home
我們看到 app下面多了一個home的component，它應有的css，html，*.spec.ts(測試代碼)，ts都生成了；如果沒有組件化經驗的同學可能會問，為啥有css，html，ts，*.spec.ts都放在這下面啊？因為組件化可以重復使用，提高效率，龐大的工程代碼中可以提高可維護性，閱讀性，方便測試等等；
再試著創建一個angular的模塊
ng g module about
可以看出模塊比component多了一個module.ts文件。
其他內容類似，讀者可以自己嘗試；
按需加載和代碼分割
在生產中，代碼會是龐大的，在單頁面應用中，如果沒有代碼分割和按需加載，那么第一次加載的時間就會非常久，可能要非常多的時間，這是無法接受的；而且用戶可能只需要訪問某部分的內容，把全部的代碼返回給用戶，這也說不過去；所以在大的應用中，代碼分割和按需加載久非常的重要；
前面我們已經提到，angular-cli使用了webpack做編譯的事情，那言外之意，我們可以用使用webpack中的code splitting來分割代碼，用angular的loadChildren來實現懶加載；
webpack的code splitting官網怎么使用，沒用過的讀者需要自行補腦；webpack code splitting；
接下來我們來實現一下，第一步：在app.module.ts中添加路由
在app.component.html中添加路由的代碼
router-outlet就是輸出的地方；
我們前面創建了一個home.component和一個abou的module。按需加載就是about這個module中實現；
所以在about.module.ts中添加以下內容：
認真校對，跟我的對比，是否有缺失內容了；然后我們啟動應用ng serve；
可以看出代碼進行了分割，多了一個0.chunk.js。why？，因為webpack會對require.ensure的地方進行分割，我們接下來再瀏覽器中訪問下看看他的按需加載
輸入localhost：4200，我們看到默認訪問／home，why？其實在代碼中我們已經默認是home；我們點擊about：
可以看到router到了about的頁面，并且多了一個0.chunk.js的js。
這個就是我們剛剛代碼分割出來的東西，其實就是about模塊相關的內容的js，包括了css，html，js，當然，沒油包含測試代碼；
集成angular material2，可能會比較復雜一點了
當然，上面講的內容還遠遠不夠，生產中還需要UI框架啊，你可以選擇bootstrap，也可以自己寫，也可以使用angular material2，往往也需要混用；
自己寫的css就放在styles.css文件中，或者是外部文件在styles.css中引用進來；
如果是boostrap文件在angular-cli.json中應用，方式如下：
安裝angular material2 。
執行以下命令：
npm install --save@angular2-material/core@angular2-material/button@angular2-material/card@angular2-material/radio@angular2-material/checkbox@angular2-material/slider@angular2-material/tooltip
在app.module.ts中加入以下代碼,這里當做全局的用
接下來我們就能使用一些material的UI組件了，我們在home中使用下試試
然后我們在home.component.html 添加
在哪里用都可以，因為是全局的。
理論上這樣操作就可以了，但是其實material還依賴一個叫hammerjs的組件我們還沒install，直接編譯肯定報錯，我們安裝下，按順序執行下面2個命令
npm install --save hammerjs
npm install --save@types/hammerjs
在app.module.ts中 import 'hammerjs';
如此，我們就可以ng serve啟動了，可以看到了material的一些組件了
使用iconfont
iconfont是阿里巴巴的icon項目，阿里巴巴使用，也公開對外使用，現在一些公司都使用了，它有CDN，訪問快，用起來也很方便，這章節講下如何使用iconfont；（當然，本質上就是引用一個icon的font文件，無論用bootstrap的還是自己做的，都是一樣的，希望讀者觸類旁通）
由于篇幅過長，簡書卡的不行，請到我的另一篇文章《Angular2-使用Angular-CLI快速搭建工程（二）》繼續查看
