四月 2024
一 二 三 四 五 六 日
1234567
891011121314
15161718192021
22232425262728
2930  

彙整
«  
  »

新北市教育局程式應用研發社群工作坊-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 新手入門

【網路資源】

12 七月, 2017 | Category: 程式教育會議

Comments are closed.