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 詳解