日期：106年7月12日~7月14日
地點：新北市教研中心
公文與計畫：
課程主題：Angular 2 進階
講師：林士立老師
【課程內容】：
- 新北市教育局程式應用研發社群工作坊-Angular(1060503~0621)
- 講義、範例檔、錄影檔：http://bit.ly/toh-ntpc-coder2017
- Angular 2 開發實戰_進階開發篇 (完整版) – 保哥
- Angular 開發環境建置 & angular-cli
開發環境與工具：
- Node.js (v6.11.1 LTS, v8.1.4 Current)
- WebStorm (2017.1.4)
- Git (2.13.2)
- Angular CLI
- GitHub – angular/angular-cli: CLI tool for Angular
- Google Chrome 擴充功能：Angular Augury
安裝開發環境與工具
- 安裝開發工具 (WebStorm)
- 安裝 Git
- 安裝 Chrome 擴充功能：Angular Augury
更新 Node.js, npm, Angular CLI
Node.js 重新安裝即可
npm i -g npm
npm unstall -g @angular/cli
npm i -g @angular/cli
實作操作指令：
練習專案檔下載：ng-demo-routing
- 下載解壓縮後，請至專案資料夾中，下達下列指令：
- npm install => 重建 node_modules
ng new ng-demo-routing --routing
npm start
ng build --prod
ng g c intro/group1
ng g c intro/group2
ng g c navbar
ng g c home
ng g c page-not-found
ng g c intro/intro
ng g m intro --routing
實作延遲載入及預先載入：
練習專案檔下載：ng-demo-routing (同上).
- 下載解壓縮後，請至專案資料夾中，下達下列指令：
- npm install => 重建 node_modules
ng g m m2 --routing
installing module
create src\app\m2\m2-routing.module.ts
create src\app\m2\m2.module.ts
WARNING Module is generated but not provided, it must be provided to be used
ng g c m2/demo1
installing component
create src\app\m2\demo1\demo1.component.css
create src\app\m2\demo1\demo1.component.html
create src\app\m2\demo1\demo1.component.spec.ts
create src\app\m2\demo1\demo1.component.ts
update src\app\m2\m2.module.ts
ng g c m2
installing component
create src\app\m2\m2.component.css
create src\app\m2\m2.component.html
create src\app\m2\m2.component.spec.ts
create src\app\m2\m2.component.ts
update src\app\m2\m2.module.ts
Module 功能介紹
Feature Module => 功能
- Lazy Loading Module
- Pre Loading Module
Core Module
Share Module
Angular Form 實作練習：
練習專案檔下載：ng-demo-forms
- 下載解壓縮後，請至專案資料夾中，下達下列指令：
- npm install => 重建 node_modules
ng new ng-demo-forms --routing
npm start
ng g c reactive
WebStorm 操作指令：
- Ctrl + Alt + o：移除未用的指令行
- Ctrl + Shift + 上下方向鍵：程式碼上下移，若為陣列元素，為自動調整 “," (逗號)。
Todo 專案前、後端程式整合實作
後端程式安裝：
安裝 XAMPP 及 Composer
範例檔下載：ng2-php-todo-demo (註：已將原 vendor 及 node_modules 資料夾刪除)
cd todo-php
composer install => 重建 vendor 資料夾
將 todo-php\app 設為 Apache 首頁路徑
設定 todo-php\.env => 連線至 MySQL 資料庫的組態設定
.\vendor\bin\phinx migrate => 建立測試資料表
使用 http://localhost 測試網站系統
- adminer.php => MySQL 線上管理程式
- todos.php => 顯示測試資料表內容
前端 Todo 專案建立實作：
練習專案檔下載：ng-demo-todo
- 下載解壓縮後，請至專案資料夾中，下達下列指令：
- npm install => 重建 node_modules
ng new ng-demo-todo --routing
npm start
ng g s todo
app.component.ts
import { Component, OnInit } from '@angular/core';
import { TodoService } from './todo.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
todos = []; // {id: 1, title: '...', content: '...'}
constructor(private todoService: TodoService) {}
ngOnInit(): void {
this.todoService.getlist().subscribe(res => this.todos = res.data);
}
addTodo() {
let newTodo = {
title: this.title,
content: this.title,
}
// this.todos.push(newTodo);
this.todoService.add(newTodo).subscribe(
// success
res => {
newTodo['id'] = res.data.id;
this.todos.push(newTodo)
}
// error
// complete
)
}
}
todo.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map'
@Injectable()
export class TodoService {
headers = new Headers({'Content-Type': 'application/json'});
options = new RequestOptions({headers: this.headers});
constructor(private http: Http) { }
add(todo) {
return this.http.post(
'http://localhost/todos.php?op=addTodo',
todo,
this.options
).map((res: Response) => res.json());
}
getlist() {
return this.http.get(
'http://localhost/todos.php'
).map((res: Response) => res.json());
}
}
app.component.html
Title: <input type="text" [(ngModel)]="title"> <button (click)="addTodo()">Submit</button>
<hr />
<ul>
<li *ngFor="let todo of todos">
{{ todo.id }} - {{ todo.title }}
</li>
</ul>
【學習資源】：
- 講義、範例檔、錄影檔：http://bit.ly/toh-ntpc-coder2017
- Angular 2 開發實戰_進階開發篇 (完整版) – 保哥
- Angular 啟動流程
- Angular 開發環境建置 & angular-cli
- Component 概述＆Decorator
- data binding 資料繫結
- Attribute、class、style binding
- Directive 指令、Pipe 管道
- NgIf、NgFor、NgSwitch 基礎
- NgModule 概述、Service 服務與 DI 依賴注入
- 父子 Component 之通訊
Angular 線上讀書會
投影片：Angular 2 新手急救站
投影片：Angular 2 開發實戰：進階開發篇 – RxJS 新手入門
【網路資源】
- Angular User Group Taiwan
- Angular 4 開發環境說明 by 保哥
- angular-cli GitHub
- TypeScript 官方網站
- TypeScript Handbook（中文版）
- Angular 官方網站
- Angular 官方中文版
- Angular 部落格
- 前端工程的夢幻逸品：Angular 2 開發框架介紹
- Angular 2 開發實戰：新手入門篇 實作環境說明
- Angular 2 開發實戰：新手入門篇 實作環境說明
- Will 保哥的技術交流中心 | Facebook
- 如何解決在 Windows 用 npm 安裝 TypeScript 之後 tsc 還是舊版的問題
- 複製物件或矩陣的值 ：吳鳳萍老師實作心得
- 線上 Angular 讀書會 | Facebook
- 30 天精通 RxJS 系列文章 – 2017 iT 邦幫忙鐵人賽
- Reactive Programming 簡介與教學(以 RxJS 為例)
- 快快樂樂學 Angular 2 開發框架 – 保哥
- 快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016) – 保哥
- Angular 與 jQuery 共舞：整合第三方套件的技巧、陷阱與解決方案 – 保哥
- 使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016) – 保哥
- 使用 Angular 2 Router 快速建構 SPA 網站 – 保哥
- Angular 2 新手急救站 – 保哥
- Angular 2 開發實戰_新手入門篇 ( 適用 Angular 2.0.0-final 版本 ) – 保哥
- Angular 2 開發實戰：進階開發篇 – RxJS 新手入門 – 保哥
- Angular 2 開發實戰_進階開發篇 (完整版) – 保哥
- 使用 TypeScript 駕馭 Web 世界的脫韁野馬：以 Angular 2 開發框架為例 – 保哥
- 初學者都該了解的 HTTP 通訊協定基礎 – 保哥
- 投影片
- Facebook 直播影片
