新北市教育局程式應用研發社群工作坊-Angular 2 進階(1060712~0714)

地點：新北市教研中心

公文與計畫：

• 新北市106年度自由軟體推廣暨程式應用研發中心工作計畫

---

課程主題：Angular 2 進階

講師：林士立老師

【課程內容】：

• 新北市教育局程式應用研發社群工作坊-Angular(1060503~0621)
• 講義、範例檔、錄影檔：http://bit.ly/toh-ntpc-coder2017
• Angular 2 開發實戰_進階開發篇 (完整版) – 保哥
• Angular 開發環境建置 & angular-cli
  • Angular 4 開發環境說明 by 保哥
  • angular-cli GitHub

開發環境與工具：

• 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

---

WebStorm 操作指令：

• Ctrl + Alt + o：移除未用的指令行
• Ctrl + Shift + 上下方向鍵：程式碼上下移，若為陣列元素，為自動調整 “," (逗號)。

---

Todo 專案前、後端程式整合實作

後端程式安裝：

• Composer
• XAMPP

安裝 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
  • Angular 4 開發環境說明 by 保哥
  • angular-cli GitHub
• 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 官網 playground
• TypeScript Handbook（中文版）
• Angular 官方網站
  • Angular Example – Tour of Heroes: Part 6
• 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 直播影片