寫在前面的廢話1

我用angular的時(shí)候還是1.x，屬于代碼寫的很反人類但是angular2還沒出的蠻荒年代。我本身是從j2ee轉(zhuǎn)到Android的工程師，也是就是說，我的日常開發(fā)語言是Java。突然切換到JavaScript那真是難受的像北極熊同企鵝講話，更何況后來嫌webstorm太卡而用起了沒有提示的sublime（嗯，終于治好了多年頑疾的“從不記函數(shù)名癥候群”）。經(jīng)過了一段痛苦不堪的撞墻經(jīng)歷后，總算是開始習(xí)慣了。

但我還是想大吼一聲，JavaScriptWCNM。

發(fā)泄完了說正事。

現(xiàn)在前端的主要框架比較火的是React，Angular雖然背后是谷歌但還是差了那么一點(diǎn)。兩者我都用過，說一下我感覺的Angular的特點(diǎn)，以及和React的不同。

首先直接拿Angular和React比較是不公平的。因?yàn)锳ngular是一個(gè)什么都有的全家桶，React只是MVC里的V，經(jīng)常需要搭配一些別的東西使用比如redux（我用的標(biāo)配是react+redux+router）。.

其次，Angular的特點(diǎn)是綁定，從寫代碼的角度上說比較符合MVC的概念。4.0里的component就相當(dāng)于C和V的合體，template或者templateUrl就是view，而class就是所謂的controller。通過在Controller里聲明唯一的Model在對(duì)應(yīng)的View里使用，達(dá)到解耦的目的。而且Angular還支持注入service，進(jìn)一步分離業(yè)務(wù)邏輯。

React的特點(diǎn)其實(shí)是虛擬dom，是提速性質(zhì)的東西。Redux才是邏輯相關(guān)，通過唯一的state來解耦，你換state我換值。兩者的思路都是很相似的，個(gè)人感覺Redux里的Reducer就是Angular里的service。

第三，哪個(gè)更好一點(diǎn)？我個(gè)人還是喜歡React更多，當(dāng)然這個(gè)主觀因素占了很大的層面。寫Angular的時(shí)候我還是一副怨天尤人的Android程序員，寫React的時(shí)候就是已經(jīng)入門的前端開發(fā)者了。

寫在前面的廢話2

一些準(zhǔn)備工作，是必須的。

node，一切的基礎(chǔ)。

sublime，這個(gè)是我個(gè)人使用的ide。之前用過webstorm，但是要注冊(cè)而且多少有點(diǎn)慢。但是用sublime小缺點(diǎn)就是需要自己下插件，webstorm確實(shí)功能全一點(diǎn)….subime對(duì)React的支持還是蠻好的，但是對(duì)Angular的支持還是有點(diǎn)坑。當(dāng)然，也可能是我插件沒裝對(duì)。

git，本項(xiàng)目已經(jīng)提交到github。當(dāng)然，更新程度和我的懶惰程度成反比。其實(shí)這個(gè)項(xiàng)目我已經(jīng)完成了，但是因?yàn)槟撤N來自東方的神秘力量（直說了吧，就是手賤）又給刪掉了…

英文好，非必須。但是英文好可以直接去看angular的官方網(wǎng)站就，傳送門，翻墻的話速度快一些。Angular的中文版還停留在2.0，寫法和4.0略有不同。

當(dāng)然4.0和2.0其實(shí)也沒差多少，至少比2.0和1.x之間的差距要小的多（滾蛋吧scope）

廢話說完了，之所以有1有2沒有3，是因?yàn)槲矣X得很多時(shí)候我只要犯二就可以了。

先說需求-任何沒有需求的項(xiàng)目都是耍！流！氓！

需求很簡(jiǎn)單，也基本上是在模仿超級(jí)機(jī)器人大戰(zhàn)的整備頁面（沒錯(cuò)我是個(gè)鋼彈迷而且最近剛好正在玩機(jī)戰(zhàn)z）。

首先本項(xiàng)目包含3個(gè)頁面：

1 主頁

上半部展示的是項(xiàng)目說明，下半部篩選出3個(gè)機(jī)體并進(jìn)行簡(jiǎn)單的說明。

2 機(jī)體列表頁

機(jī)體展示，展示所有擁有的機(jī)體，包括名稱和狀態(tài)（為了防止圖片侵權(quán)，用的都是我自己做的高達(dá)模型）。

3 機(jī)體詳情頁

從主頁和詳情頁面點(diǎn)擊任意一部機(jī)體都可以跳轉(zhuǎn)到這個(gè)頁面，主要介紹機(jī)體的各項(xiàng)參數(shù)，基本情況以及狀態(tài)。

環(huán)境搭建

首先要有node以及sublime，然后需要用sublime的package manager安裝插件typescript。

關(guān)于如何安裝node、sublime的包管理器并下載插件請(qǐng)參見之前文章里的方法。

其次，可以用sourceTree或者命令行克隆地址：

1）angular給的官方quickstart

https://github.com/angular/quickstart.git

2）我的改編后的版本，好處是集成了webpack和scss，缺點(diǎn)就是寫的比較亂而且不知道有什么坑。

https://github.com/stormrabbit/gundam-meister.git

第三，npm install 安裝各項(xiàng)依賴。

如果安裝失敗可以考慮用下cnpm

cnpm：

npm install -g cnpm --registry=http://r.cnpmjs.orgnpm install microtime --registry=http://r.cnpmjs.org --disturl=http://dist.cnpmjs.org

假裝安裝一下

運(yùn)行命令 npm start

目錄結(jié)構(gòu)：

src/main.ts 項(xiàng)目的入口文件 暫時(shí)不需要修改

src/index.html 項(xiàng)目展示的html，容器，相當(dāng)于java的虛擬機(jī)，標(biāo)簽是自定義的component的標(biāo)簽化。

src/app/app.module.ts 項(xiàng)目的配置文件，所用的component、注冊(cè)的service以及以后會(huì)有的routing等等都會(huì)注冊(cè)到這里。相當(dāng)于Android的mainfist.xml文件。

src/app/component/appcomponent/app.component.ts 項(xiàng)目的第一個(gè)容器，也是項(xiàng)目的正式入口。相當(dāng)于java中的main函數(shù)，Android中的MainActivity。當(dāng)然也不是一定要叫這個(gè)名字，不過是一種約定俗成。其中template是html頁面，相當(dāng)于view，class相當(dāng)于controller。

訪問http://localhost:3000/，顯示頁面

環(huán)境搭建完畢，hello，world。

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