1.安裝node

2.安裝 cli工具

npm install -g @angular/cli

如果失敗截圖如下(圖1)所示

圖1

請輸入下面的命令:npm--registry http://registry.cnpmjs.org info underscore

該命令運行成功后如下圖2所示:

圖2

如果npm install -g @angular/cli 安裝成功,會有下圖3的提示:

圖3

3.創建一個新的工程

ng new my-app

如果出現圖4的截圖:

圖4

不要擔心,意思是說正在通過npm市場安裝一下項目所依賴的工具包,可能需要一些時間.

項目創建成功的截圖(圖5)

圖5

4.cd到工程目錄之下

cd my-app

5.運行

ng serve

如圖6所示

圖6

則代表項目運行成功

6.在瀏覽器中輸入

http://localhost:4200

就可以看到自己的項目了

7.開始編寫代碼,做我們自己的項目

用Angular2給的一個Hero案例來講解

8.在界面上顯示一個英雄

在你的項目工程中找到文件:..src/app/app.component.ts ?打開并編輯

編輯之前如圖7:

圖7

編輯之后如圖8

圖8

代碼改完并保存之后,會看到瀏覽器界面自動刷新了,并且,能看到一個叫做張三的英雄出現在界面上.

9.不難發現.我們現在這個英雄張三,只是一個字符串而已,接下來,我們來做一個不是字符串,而是對象的英雄 --- 張三

還是在當前文件(app.component.ts)中修改代碼,

在圖9紅框1的地方聲明一個英雄類:Hero

在圖9紅框2的地方,根據英雄類創建一個英雄對象hero

在圖9紅框3的地方,通過對象.屬性的方式顯示銀熊的名字

圖9

10.但是我們的英雄,不僅有name屬性,還有一個id編號,為了讓英雄的所有信息都能顯示到界面上,我們需要修改一下模板界面了,改好之后的效果圖如圖10所示:

圖10

11.這樣的話,界面上就顯示出來英雄的所有信息了

但是我們發現了另一個問題:我們所有的標簽寫在一行字符串中了,

html標簽能寫成多行顯示嗎?

答案肯定的:用 ? ` ` ? ?替換 ? ?" "

` 在鍵盤上的位置如圖11所示

圖11

template: 對應的html標簽可以修改成圖12的樣子了:

圖12

12.英雄叫張三太不好聽了,我們讓英雄的名字擁有編輯能力吧:

把模板中的hero.name裝到一個input中就可以編輯了:

改好的代碼如圖13所示:

圖13

但是,有一個問題,出現了:

圖13中紅框1在修改英雄的名字,

但是紅框2并沒有跟著改變,

這個效果能實現嗎------能

怎么實現-------下一節Angular2 二:Hero Demo 詳解