前言：

本文適合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工程

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

在app.module.ts中 import 'hammerjs';

如此，我們就可以ng serve啟動了，可以看到了material的一些元件了

使用iconfont

iconfont是阿里巴巴的icon專案，阿里巴巴使用，也公開對外使用，現在一些公司都使用了，它有CDN，訪問快，用起來也很方便，這章節講下如何使用iconfont；（當然，本質上就是引用一個icon的font檔案，無論用bootstrap的還是自己做的，都是一樣的，希望讀者觸類旁通）