快速上手

1.安裝node.js和npm管理包
2.安裝angular CLI,來創建angular應用
3.創建新的工作區 ng new my-app,進入工作區，啟用服務器

應用的外殼

1.創建一個工作區 ng new 工作區名稱，創建工作區和初始應用后
2. cd 工作目錄 ng serve --open啟用這個應用
3.看到的angular組件，就是整個應用的外殼
4.應用的外殼包含了三個基本文件，ts文件 ，html模板文件，css私有樣式文件
5.可以開始創建第一個angular組件

英雄編輯器

1.創建組件ng generate component heroes heroes,生成了3個文件
.ts類文件
導入核心庫，裝飾器函數指定組件所需要的元數據（元素，模板，樣式） exoprt類，用來給別的組件調用
export類里有一個構造函數和初始化邏輯函數
.html模板文件
將類的屬性差值綁定的方式將內容顯示在html界面，而組件的界面需要放到殼組件的模板中
.css 樣式表文件

可以單獨建立類文件生成屬性字段
將類導入到組件的ts類文件中，在ts文件的export類中實例化類并賦值，界面上綁定類屬性值來實現插值綁定。
但這僅僅是單向綁定，類的內容能夠輸出在界面上看到，界面無法改變類的屬性值。
但可以通過雙向綁定的方式，雙向綁定的方式需要在模板中添加一個輸入控件。
但要想引用輸入控件，就需要添加該控件所在的模塊。導入的位置原本是該組件的ts類文件。
導入對于關鍵性元素，需要添加到頂級類appMoudle中，并添加到@NgModule裝飾器的import里。
在創建組件的過程中，會將組件的聲明自動的添加到@NgModule的declarations中

顯示英雄列表

1.通過手動添加類文件來模仿服務器獲得的數據，將文件導入到heroes的組件里
2.在組件類中添加屬性來接收類，用來暴露英雄類的內容
3. 通過使用*ngFor來在html模板中，遍歷和顯示一個數組中的內容
4.想要添加點擊英雄，出現他的詳細信息的功能，所以需要在html模板中為li元素添加點擊事件,點擊事件處理的是將從數組里所選中的英雄賦值給程序里的英雄變量
5.由于在程序中變量名意義修改了，所以改變英雄變量名稱，但原來的變量名在最初顯示英雄html時有引用，所以先將html模板中顯示時引用的變量改為程序中的英雄變量
6.由于一開始沒有選中，所以程序這時候會報錯（修改這個錯誤，用到JavaScript，我不會，所以看不懂）
7.angularzhogn css類綁定機制非常的靈活，可以在運行過程中修改顯示
8.最終，這一個組件上，先顯示并添加點擊后css的改變，再處理被點擊后的效果！

主從組件

1.HeroesComponent 同時顯示了英雄列表和所選英雄的詳情，把英雄詳情移入一個獨立的、可復用的 HeroDetailComponent，創建組件hero-detail,生成3個文件
2.從 HeroesComponent 模板的底部把表示英雄詳情的 HTML 代碼剪切粘貼到所生成的 HeroDetailComponent 模板中
3.所粘貼的 HTML 引用了 selectedHero。 新的 HeroDetailComponent 可以展示任意英雄，因此還要把模板中的所有 selectedHero 替換為 hero。
4.為Hero添加一個@input裝飾器,因為另一個組件會將內容綁定到hero上，在herocomponent中選擇內容后，內容會被傳到herodetailcomponent里
5.現在英雄詳情被委托給 HeroDetailComponent 了，它和原來的HeroesComponent具有父子屬性，把 添加到 HeroesComponent 模板的底部，以便把英雄詳情的視圖顯示到那里。
6.把 HeroesComponent.selectedHero 綁定到該元素的 hero 屬性，通過屬性綁定語法來實現一種單向數據綁定，從 HeroesComponent 的 selectedHero 屬性綁定到目標元素的 hero 屬性，并映射到了 HeroDetailComponent 的 hero 屬性。

總結

以上是生活随笔為你收集整理的【Angular4】英雄指南demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。