地點：新北市教研中心
公文與計畫：
課程主題：Angular 2 進階
講師：林士立老師
【課程內容】： 開發環境與工具：
安裝開發環境與工具
安裝開發工具 (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
實作操作指令：
下載解壓縮後，請至專案資料夾中，下達下列指令：
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
實作延遲載入及預先載入：
下載解壓縮後，請至專案資料夾中，下達下列指令：
npm install => 重建 node_modules
ng g m m2 --routing
installing module
ng g c m2/demo1
installing componentupdate src\app\m2\m2.module.ts
ng g c m2
installing componentupdate src\app\m2\m2.module.ts
WebStorm 操作指令：
Ctrl + Alt + o：移除未用的指令行
Ctrl + Shift + 上下方向鍵：程式碼上下移，若為陣列元素，為自動調整 “," (逗號)。
Todo 專案前、後端程式整合實作
後端程式安裝：
範例檔下載：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 專案建立實作：
下載解壓縮後，請至專案資料夾中，下達下列指令：
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>
【學習資源】： Angular 線上讀書會
VIDEO
VIDEO
VIDEO
【網路資源】
