前言：

本文適合Angular2的初學(xué)者閱讀；

時下web前端發(fā)展迅猛，新框架層出不窮，大家都知道三駕馬車VueJS，Angular2，React。國內(nèi)VueJS非常熱門，百度熱點(diǎn)趨勢以1000%的漲幅在增加。Angular2在國外非常受歡迎，在國內(nèi)的粉絲還非常少，文章不多，究其原因有這么幾點(diǎn)主要是學(xué)習(xí)曲線陡峭，上手困難，（1）angular本身概念難懂，（2）使用typescript開發(fā)，用到很多es6特性；（3）配置太多，復(fù)雜，工程架構(gòu)搭建上手難度大。本文為了解決項(xiàng)目搭建的問題，詳細(xì)的一步步演示了如何搭建angular2項(xiàng)目；

為什么選擇Angular CLI？

在開發(fā)中，搭建一個良好的前端架構(gòu)非常重要，他對后續(xù)的開發(fā)，維護(hù)，團(tuán)隊(duì)協(xié)作，易讀性具有重要意義；

生產(chǎn)中搭建Angular2的前端架構(gòu)一般有三種選擇：

第一種是自己一點(diǎn)點(diǎn)的搭建，這種對開發(fā)者要求比較高，必須對框架具有很深入的理解和很豐富的使用經(jīng)驗(yàn)，否則搭建起來會遇到非常多的問題；

第二種是直接使用Angular2 seed，一些國外優(yōu)秀程序員在github上已經(jīng)貢獻(xiàn)了，非常感激！我本人也站在前人的基礎(chǔ)上加上了一些自己的內(nèi)容，構(gòu)建了一套腳手架，初學(xué)者們可以拿來即用，后面不斷的去理解。hotshots-angular2-webpack-seed；這里面用刀了懶加載，webpack code splitting，涵蓋angular2的很多知識點(diǎn)；

第三種就是本文要講的使用angular2提供的Angular CLI來快速搭建，他本質(zhì)也是使用了webpack來編譯，打包，壓縮等構(gòu)建的事情，適合想用webpack的特性又不想學(xué)習(xí)webpack那些復(fù)雜的配置的開發(fā)者；

利弊：使用Angular CLI可以很快，很簡單的構(gòu)建angular2項(xiàng)目，只要掌握幾行命令就能構(gòu)建出前端架構(gòu)的最佳實(shí)踐，讓人驚嘆！不好的一面，簡單的東西就意味著不靈活，如果你想高可控的配置你的項(xiàng)目，還是建議選擇第二種方案；在本文寫的這個時間（2016-12-2），Angular CLI還處于beta階段，還只能用來自娛自樂，還不能用在生產(chǎn)中；

AngularCLI主要特性

1 Angular CLI 可以快速搭建框架，創(chuàng)建module，service，class，directive等；

2 具有webpack的功能，代碼分割（code splitting），按需加載；

3 代碼打包壓縮；

4 模塊測試，端到端測試；

5 熱部署，有改動立即重新編譯，不用刷新瀏覽器；而且速度很快

6 有開發(fā)環(huán)境，測試環(huán)境，生產(chǎn)環(huán)境的配置，不用自己操心； 

7 sass，less的預(yù)編譯Angular CLI都會自動識別后綴來編譯；

8 typescript的配置，Angular CLI在創(chuàng)建應(yīng)用時都可以自己配置；

9 在創(chuàng)建好的工程也可以做一些個性化的配置，webpack的具體配置還不支持，未來可能會增加；

10 Angular CLI創(chuàng)建的工程結(jié)構(gòu)是最佳實(shí)踐，生產(chǎn)可用；

開始搭建，基礎(chǔ)工具的安裝：

你需要安裝NodeJS 5.0以上版本,NPM 3.0以上版本；WebStorm 11；

安裝 Angular CLI

windows： npm install -g angular-cli

macOS: sudo npm install -g angular-cli

創(chuàng)建Angular2工程

注：本文的工程代碼https://github.com/linweiwei123/hotshots-angular2-cli-demo

ng new project_name ,project_name是你的項(xiàng)目名；

上圖就是創(chuàng)建的過程，此時在創(chuàng)建中，npm也在下載相關(guān)的包，耐心等待；從控制臺中可以看到創(chuàng)建的內(nèi)容；

工程結(jié)構(gòu)圖如下：

就這樣，最簡單的angular2工程創(chuàng)建好了；

工程結(jié)構(gòu)熟悉一下：angular-cli.json 是angular-cli的配置文件，測試配置文件karma.conf.js，typescript的lint配置文件，端到端的測試配置文件protractor.conf.js，導(dǎo)入es6模塊的配置文件polyfills.ts，angular工程的main.ts引導(dǎo)啟動文件，全局樣式style.css，typescript配置文件ts.config.json;typescript的聲明文件typings.d.ts,以及生成了一個angular組建 app.components相關(guān)的css，html，ts。這些配置都是angular2的生產(chǎn)項(xiàng)目中需要配置的文件，angular-cli幫我們做了這么多事情，我們只用了一個命令；

啟動

cd project_name 

ng serve

瀏覽器輸入 http://localhost:4200/ 就可以看到app works！

嘗試的修改一下app.component.ts中的文字，看看熱部署是否馬上生效？yes！it does！

創(chuàng)建module，component，service，class

創(chuàng)建一個home的module；

 ng g component home

我們看到 app下面多了一個home的component，它應(yīng)有的css，html，*.spec.ts(測試代碼)，ts都生成了；如果沒有組件化經(jīng)驗(yàn)的同學(xué)可能會問，為啥有css，html，ts，*.spec.ts都放在這下面??？因?yàn)榻M件化可以重復(fù)使用，提高效率，龐大的工程代碼中可以提高可維護(hù)性，閱讀性，方便測試等等；

再試著創(chuàng)建一個angular的模塊

ng g module about

可以看出模塊比component多了一個module.ts文件。

其他內(nèi)容類似，讀者可以自己嘗試；

按需加載和代碼分割

在生產(chǎn)中，代碼是龐大的，在單頁面應(yīng)用中，如果沒有代碼分割和按需加載，那么第一次加載的時間就會非常久，可能要非常多的時間，這是無法接受的；而且用戶可能只需要訪問某部分的內(nèi)容，把全部的代碼返回給用戶，這也說不過去；所以在大的應(yīng)用中，代碼分割和按需加載久非常的重要；

前面我們已經(jīng)提到，angular-cli使用了webpack做編譯的事情，那言外之意，我們可以用使用webpack中的code splitting來分割代碼，用angular的loadChildren來實(shí)現(xiàn)懶加載；

webpack的code splitting官網(wǎng)怎么使用，沒用過的讀者需要自行補(bǔ)腦；webpack code splitting；

接下來我們來實(shí)現(xiàn)一下，第一步：在app.module.ts中添加路由

在app.component.html中添加路由的代碼

router-outlet就是輸出的地方；

我們前面創(chuàng)建了一個home.component和一個abou的module。按需加載就是about這個module中實(shí)現(xiàn)；

所以在about.module.ts中添加以下內(nèi)容：

認(rèn)真校對，跟我的對比，是否有缺失內(nèi)容了；然后我們啟動應(yīng)用ng serve；

可以看出代碼進(jìn)行了分割，多了一個0.chunk.js。why？，因?yàn)閣ebpack會對require.ensure的地方進(jìn)行分割，我們接下來再瀏覽器中訪問下看看他的按需加載

輸入localhost：4200，我們看到默認(rèn)訪問／home，why？其實(shí)在代碼中我們已經(jīng)默認(rèn)是home；我們點(diǎn)擊about：

可以看到router到了about的頁面，并且多了一個0.chunk.js的js。

這個就是我們剛剛代碼分割出來的東西，其實(shí)就是about模塊相關(guān)的內(nèi)容的js，包括了css，html，js，當(dāng)然，沒油包含測試代碼；

集成angular material2，可能會比較復(fù)雜一點(diǎn)了

當(dāng)然，上面講的內(nèi)容還遠(yuǎn)遠(yuǎn)不夠，生產(chǎn)中還需要UI框架啊，你可以選擇bootstrap，也可以自己寫，也可以使用angular material2，往往也需要混用；

自己寫的css就放在styles.css文件中，或者是外部文件在styles.css中引用進(jìn)來；

如果是boostrap文件在angular-cli.json中應(yīng)用，方式如下：

安裝angular material2 。

執(zhí)行以下命令：

在app.module.ts中加入以下代碼,這里當(dāng)做全局的用

接下來我們就能使用一些material的UI組件了，我們在home中使用下試試

然后我們在home.component.html 添加

在哪里用都可以，因?yàn)槭侨值摹?/p>

理論上這樣操作就可以了，但是其實(shí)material還依賴一個叫hammerjs的組件我們還沒install，直接編譯肯定報錯，我們安裝下，按順序執(zhí)行下面2個命令

npm install --save hammerjs


npm install --save@types/hammerjs

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

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

使用iconfont

iconfont是阿里巴巴的icon項(xiàng)目，阿里巴巴使用，也公開對外使用，現(xiàn)在一些公司都使用了，它有CDN，訪問快，用起來也很方便，這章節(jié)講下如何使用iconfont；（當(dāng)然，本質(zhì)上就是引用一個icon的font文件，無論用bootstrap的還是自己做的，都是一樣的，希望讀者觸類旁通）

由于篇幅過長，請到我的另一篇文章《Angular2-使用Angular-CLI快速搭建工程（二） 》繼續(xù)查看

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論