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