快速上手

1.安裝node.js和npm管理包
2.安裝angular CLI,來創(chuàng)建angular應(yīng)用
3.創(chuàng)建新的工作區(qū) ng new my-app,進(jìn)入工作區(qū)，啟用服務(wù)器

應(yīng)用的外殼

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

英雄編輯器

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

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

顯示英雄列表

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

主從組件

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。