前言：

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

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

為什么選擇Angular CLI？

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

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

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

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

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

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

AngularCLI主要特性

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

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

3 代碼打包壓縮；

4 模塊測(cè)試，端到端測(cè)試；

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

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

7 sass，less的預(yù)編譯Angular CLI都會(huì)自動(dòng)識(shí)別后綴來(lái)編譯；

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

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

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)建的過(guò)程，此時(shí)在創(chuàng)建中，npm也在下載相關(guān)的包，耐心等待；從控制臺(tái)中可以看到創(chuàng)建的內(nèi)容；

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

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

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

啟動(dòng)

cd project_name 

ng serve

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

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

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

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

 ng g component home

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

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

ng g module about

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

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

按需加載和代碼分割

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

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

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

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

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

router-outlet就是輸出的地方；

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

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

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

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

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

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

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

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

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

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

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

安裝angular material2 。

執(zhí)行以下命令：

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

接下來(lái)我們就能使用一些material的UI組件了，我們?cè)趆ome中使用下試試

然后我們?cè)趆ome.component.html 添加

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

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

npm install --save hammerjs


npm install --save@types/hammerjs

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

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

使用iconfont

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

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

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