一虚倒、概述##
時(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í)了。
