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

日期:106年7月12日~7月14日

地點:新北市教研中心

公文與計畫:


課程主題: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

實作操作指令:

練習專案檔下載: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>

【學習資源】:


Angular 線上讀書會

投影片:Angular 2 新手急救站

投影片:Angular 2 開發實戰:進階開發篇 – RxJS 新手入門


【網路資源】