由於這陣子去參加保哥的課程學習了一些教材的方式，剛好公司要內訓自己也製作了一個簡易的教材簡報~
大綱
環境開發
> node.js
> angular cli
專案基礎架構
> 建立專案
> Cut Component
畫面呈現與資料綁定
> 內嵌繫結 (interpolation)
> 屬性繫結 (Property Binding)
> 事件繫結 (Event Binding)
> 雙向繫結 (Two-way Binding)
> 屬性指令 (Attribute Directive)
> 結構指令 (Structural Directive)
元件傳遞資料
> @Input() 傳遞資料給子元件
> @Output() 接收子元件輸出的資料
服務 (service)
> 自訂服務元件
> HttpClient 服務
環境開發
- node.js
- angular cli
- 下載Node.js
- 安裝angular cli
npm install -g @angular/cli- 確認版本
node -v // 確認 node.js 版本為 8.9 以上
npm -v // 確認版本為 5.5.1 以上
ng -v // 確認cli版本為 6.0.0 以上專案基礎架構
- 建立專案
- Cut Component
ng new angular-practice //建立專案
cd angular-practice //檔案位置
npm start 或 ng serve //啟用- 下載模板
- 將模板的assets、index.html、app.component.html複製貼上
- 將模板切成三個component
ng g c firstSection //新增component- 將firstSection部分的html搬到firstSection.component.html
- app.component.html 中加入
<firstSection> </firstSection>畫面呈現與資料綁定
- 內嵌繫結 (interpolation)
- 屬性繫結 (Property Binding)
- 事件繫結 (Event Binding)
- 雙向繫結 (Two-way Binding)
- 屬性指令 (Attribute Directive)
- 結構指令 (Structural Directive)
- 在header-nav.component.html加入
- 內嵌繫結 (interpolation)
- 屬性繫結 (Property Binding)
在header-nav.component.html加入
> 內嵌繫結 (interpolation)
> 性繫結 (Property Binding)
在main.component.html加入
> 事件繫結 (Event Binding)
> 屬性指令 (Attribute Directive)
main.component.ts加入
在header-nav.component.html加入
> 雙向繫結 (Two-way Binding) -> [(ngModel)]
> 結構指令 (Structural Directive) -> *ngIf
在header-nav.component.ts加入
使用雙向繫結 (Two-way Binding) -> [(ngModel)]
> 需在app.module.ts的imports中加入FormsModule
在main.component.ts加入
在main.component.html加入
> 結構指令 (Structural Directive) -> *ngFor
元件傳遞資料
- @Input() 傳遞資料給子元件
- @Output() 接收子元件輸出的資料
把list資料移到app.component.ts
在app.component.html加入
在main.component.ts加入
> @Input() 傳遞資料給子元件
在header-nav.component.ts加入
> @Output() 接收子元件輸出的資料
在app.component.html加入
在app.component.ts加入
服務 (service)
- 自訂服務元件
- HttpClient 服務
自訂服務元件
ng g s carService //建立服務元件在app.module.ts加入
> HttpClient 服務
在car-service.service.ts加入
在app.component.ts呼叫服務元件，替換掉原本的資料
