一、概述##
時(shí)下web前端非常熱門(mén)，新的框架層出不窮，web前端的三駕馬車(chē)VueJS、AngularJS、ReactJS發(fā)展非常迅猛。其中VueJS是國(guó)人開(kāi)發(fā)的項(xiàng)目，百度熱點(diǎn)趨勢(shì)以1000%的速度在增長(zhǎng)，其中是否有有我大天朝的情懷在吧。AngularJS在國(guó)外非常受歡迎，在國(guó)內(nèi)用的不是非常多。這次我們開(kāi)始學(xué)習(xí)一下AngularJS，師夷長(zhǎng)技以制夷。AngularJS在學(xué)習(xí)的過(guò)程中，上手比較難，主要有一下方面的原因：
- AngularJS概念比較難懂
- AngularJS使用TypeScript進(jìn)行開(kāi)發(fā)，用到很多es6的特性
- AngularJS在項(xiàng)目創(chuàng)建的時(shí)候需要進(jìn)行很多配置，很復(fù)雜。
本文通過(guò)實(shí)現(xiàn)一個(gè)實(shí)例，詳細(xì)演示如何一步步實(shí)現(xiàn)AngularJS項(xiàng)目的搭建。說(shuō)明一下，本文中的AngularJS都是基于Angular2.0以上的。
在實(shí)際項(xiàng)目中，搭建AngularJS主要有三種方式：
1、第一種方式###
這種方式是完全通過(guò)開(kāi)發(fā)者搭建起來(lái)，不適用任何工具，這種方式要求開(kāi)發(fā)者對(duì)AngularJS框架有非常深入的了解，否則會(huì)出現(xiàn)很多問(wèn)題。
2、第二種方式###
第二種就是使用Angular2 seed，通過(guò)webpack的方式，這種方式在Github上有很多優(yōu)秀的項(xiàng)目，可以根據(jù)自己的需要在別人的基礎(chǔ)上搭建項(xiàng)目。推薦一個(gè)webpack的項(xiàng)目：https://github.com/kunl/Angular-webpack-AOT
3、第三種方式###
本文講的就是第三種方式，通過(guò)Angular-cli方式構(gòu)建，這種方式非常簡(jiǎn)單，但是這樣會(huì)導(dǎo)致項(xiàng)目構(gòu)建不靈活，不過(guò)還是推薦這種方式
在這里簡(jiǎn)單介紹一下Angular-cli的特性：
- Angular-cli可以快速搭建框架，創(chuàng)建module，service，class，directive等；
- 有webpack的功能，可以實(shí)現(xiàn)代碼分隔、按需加載等；
- 自動(dòng)配置開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境、生產(chǎn)環(huán)境，可以實(shí)現(xiàn)代碼的打包壓縮和熱部署，還可以實(shí)現(xiàn)模塊測(cè)試、端到端測(cè)試
- Angular-cli可以通過(guò)后綴自動(dòng)識(shí)別sass、less的預(yù)編譯；
- Angular-cli可以在創(chuàng)建的時(shí)候進(jìn)行TypeScript的配置，還可以做一些個(gè)性化配置；
- 通過(guò)Angular-cli創(chuàng)建的工程結(jié)構(gòu)是最佳實(shí)踐，可以用于生產(chǎn)環(huán)境；
接下來(lái)我們正式開(kāi)始構(gòu)建我們第一個(gè)Angular2實(shí)例：
二、安裝nodejs##
AngularJS需要用到Nodejs，所以我們需要先安裝nodejs，需要用到nodejs，nodejs的下載地址是：https://nodejs.org/en/download/，可以根據(jù)自己的機(jī)器下載，這里是演示W(wǎng)indows10下的安裝：
Windows系統(tǒng)下下載安裝包，是一個(gè)exe的可執(zhí)行文件，雙擊開(kāi)始安裝：
點(diǎn)擊next進(jìn)入下一步：
進(jìn)入到這里需要勾選接受協(xié)議，不勾選不能進(jìn)入下一步，勾選之后點(diǎn)擊next進(jìn)入下一步：
進(jìn)入這一步，可以自定義安裝路徑，也可以使用默認(rèn)路徑，選好之后點(diǎn)擊next進(jìn)入下一步：
這里是選擇安裝nodejs的組件，一般情況下默認(rèn)即可，然后點(diǎn)擊next
進(jìn)入到這一步之前還有一個(gè)界面的，忘記截圖了，直接點(diǎn)擊Install就可以了，等待進(jìn)度條走完，就會(huì)自動(dòng)進(jìn)入下一步：
到這里點(diǎn)擊Finish完成nodejs的安裝，進(jìn)入命令面板，輸入node -v查看是否安裝完成。
這是查看nodejs安裝版本的命令，也是可以確認(rèn)我們的nodejs已經(jīng)正確安裝了。
三、安裝npm和cnpm##
下一步是安裝npm，
NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問(wèn)題，常見(jiàn)的使用場(chǎng)景有以下幾種：
- 允許用戶(hù)從NPM服務(wù)器下載別人編寫(xiě)的第三方包到本地使用。
- 允許用戶(hù)從NPM服務(wù)器下載并安裝別人編寫(xiě)的命令行程序到本地使用。
- 允許用戶(hù)將自己編寫(xiě)的包或命令行程序上傳到NPM服務(wù)器供別人使用。
到這里已經(jīng)完成了nodejs和npm的安裝，不過(guò)在大天朝內(nèi)用npm安裝的話會(huì)有一些問(wèn)題，所以我們用cnpm安裝，cnpm也是npm的一個(gè)包。
安裝cnpm，執(zhí)行命令
npm i -g cnpm
執(zhí)行這個(gè)命令之后，等待完成，然后輸入cnpm version查看是否安裝完成，這里我已經(jīng)安裝過(guò)了，所以可以進(jìn)去了。
安裝完成cnpm之后，我們開(kāi)始安裝Angular-cli。
執(zhí)行命令
cnpm i -g angular-cli
等待命令執(zhí)行完成，
然后可以執(zhí)行ng version命令，查看是否安裝完成和angular-cli的版本
安裝完成之后我們就可以使用ng命令，下面開(kāi)始創(chuàng)建項(xiàng)目。
四、項(xiàng)目創(chuàng)建##
安裝完成angular-cli之后就可以直接創(chuàng)建項(xiàng)目了，執(zhí)行命令
ng new JustForTest
其中JustForTest是項(xiàng)目名稱(chēng)
執(zhí)行這個(gè)命令是創(chuàng)建很多文件，而且需要等待一下，
等待到這里，就完成了項(xiàng)目的創(chuàng)建，我們到目錄下去看一下創(chuàng)建的工程結(jié)構(gòu)
需要等待很久，就是為了創(chuàng)建紅框中的包。
我們用命令進(jìn)去到這個(gè)項(xiàng)目中，然后執(zhí)行命令
ng serve -prod -aot
啟動(dòng)項(xiàng)目，-prod -aot不是必須的，也可以直接使用ng serve啟動(dòng)。
這樣就可以直接啟動(dòng)項(xiàng)目，我們?cè)跒g覽器中輸入：http://localhost:4200可以直接訪問(wèn)：
這樣就是通過(guò)cnpm安裝angular-cli，用angular-cli創(chuàng)建一個(gè)angular2項(xiàng)目。
五、在導(dǎo)入項(xiàng)目##
如果是從網(wǎng)上找項(xiàng)目，我們?cè)趺丛诒镜貑?dòng)呢？下面我們具體操作一下：
推薦大家去看一下大漠老師的這個(gè)教程：Angular2.0視頻教程來(lái)了
，在這里演示我們也是用大漠老師的一個(gè)項(xiàng)目：NiceFish，首先我們需要通過(guò)git將項(xiàng)目clone下來(lái)，這里就不演示這個(gè)了，這是NiceFish的項(xiàng)目地址：http://git.oschina.net/mumu-osc/NiceFish
項(xiàng)目clone下來(lái)之后，命令行進(jìn)入項(xiàng)目所在目錄。
執(zhí)行命令
cnpm i -g @angular/cli
這里說(shuō)明一下，之前我們安裝的是全局的angular-cli。
等待命令執(zhí)行完成，之后再執(zhí)行命令
cnpm install
然后執(zhí)行命令
ng serve -prod -aot
然后等待編譯完成。
完成之后，我們就可以在瀏覽器中輸入：
http://localhost:4200
訪問(wèn)項(xiàng)目。
到這里，就完成了新項(xiàng)目的創(chuàng)建和項(xiàng)目導(dǎo)入，接下來(lái)開(kāi)始進(jìn)去Angular2的正式學(xué)習(xí)了。
