SlideShare ist ein Scribd-Unternehmen logo
1 von 38
快快樂樂學會 Angular 2 網站開發框架
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格:http://blog.miniasp.com/
適用 Angular 2.0.0-rc.5 版本
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
我們所認識的前端技術都是假的
千萬不要執著你之前學會的任何技術
忘掉一切的業障
才有重生的機會
今天我們要來
重新認識 Angular 2 開發框架
記得:今天是來消除業障的!
ANGULAR 2 簡介
Angular 2 Introduction
Angular 2 從框架轉向平台
10
前端工程的夢幻逸品:Angular 2 開發框架介紹
Angular 2 比 Angular 1 更好
• 速度更快
– 偵測變更:比 ng1 快 10 倍
– 渲染速度:比 ng1 快 5 倍 (Render & Re-render)
• 範本編譯:支援 Template 預先編譯機制
– 更小的 Library Size ( 透過 webpack 自動合併 )
– 支援延遲載入機制與伺服器渲染機制 (Node.js & ASP.NET )
• 學習曲線更低
– 採用 TypeScript 語法更簡潔 ( 類別、介面、屬性、方法 )
– 移除超過 40+ 個 directives
• 平台支援更強大
– 支援 Browser, Node.js, NativeScript, React Native, …
11
Angular 2 的開發語言
TypeScript
2.0
ES 2015
ES5
Angular 2 的開發語言
• ES5
– 傳統 JavaScript 程式語言 ( IE9+ )
• ES 2015
– 此版本為 ES5 的「超集合」
– 具有新穎的 JavaScript 語言特性 ( let, const, for-of, … )
– 可透過 Babel 轉譯器將瀏覽器不支援的語法轉為 ES5 版本
• TypeScript
– 此版本為 ES 2015 的「超集合」
– 具有強型別特性、內建 ES5 轉譯器 (Transpiler)、更好的工具支
援
• Dart
– 非 JavaScript 家族的程式語言
– 具有強型別特性 13
Angular 2 的開發工具
• Visual Studio Code (推薦)
• Visual Studio 2015
• Sublime Text
• WebStorm
• Atom
• Plunker
14
Angular 2 頁面的組成
應用程式元件 + 樣板 + 樣式
( AppComponent )
頁首元件 + 樣板 + 樣式
( HeaderComponent )
子選單
元件 + 樣板 + 樣式
(AsideComponent)
15
主要內容
元件 + 樣板 + 樣式
(ArticleComponent)
Angular 2 應用程式的組成
• App Component元件
• Child Component元件
• Services Component元件
• Pipe Component元件
模組 • AppModule
Angular 2 元件的組成
範本
( Template )
• HTML 版面配置
• HTML 部分片段
• 資料繫結 (Bindings)
• 畫面命令 (Directives)
類別
( Class )
• 建構式 (Constructor)
• 屬性 (Properties)
• 方法 (Methods)
中繼資料
( Metadata )
• 裝飾器 (Decorator)
• 針對類別
• 針對屬性
• 針對方法
• 針對參數
17
認識 Angular 元件的程式碼結構
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
}
18
Angular 2 結構剖析
19
Angular 2 結構剖析
• Module 應用程式被切分成許多「模組」
• Component 每個模組下有許多「元件」
• Template 每個元件都可能有自己的「樣板」
• Metadata 每個元件都可以標示「中繼資料」
• Data Binding 樣板與元件屬性、方法可以進行綁定
• Directive 將 DOM 轉換為多功能的「宣告命令」
• Service 由「服務」集中管理資料與運算邏輯
• Dependency Injection 由「相依注入」機制管理物件生命週期
20
快快樂樂建立 ANGULAR 2 應用程式
Build your own Angular 2 Application
21
準備 Angular 2 開發環境
• 架設 Angular 2 開發環境說明文件
• 如何修改 Visual Studio Code 內建的 TypeScript 版本
• 關於 TypeScript 2.0 之後的模組定義檔 ( *.d.ts )
22
使用 Angular CLI 建立專案範本
• 請務必在 NTFS 檔案系統執行相關命令 (Windows)
• ng new demo1
– 初始化 Git 儲存庫
– 安裝 npm 相依套件
• cd demo1
• ng serve
– http://localhost:4200
23
了解專案結構
• 首頁 HTML 與 Angular 2 主程式
– src/index.html 預設網站首頁
– src/main.ts 預設 Angular 2 啟動器 (主程式)
• 公用檔案資料夾
– public/ 放置網站的相關資源檔案 (CSS,Image,Fonts,…)
• 根元件
– src/app/app.module.ts 應用程式的NgModule定義檔
– src/app/app.component.ts 根元件主程式
– src/app/app.component.html 根元件範本檔 (Template)
– src/app/app.component.css 根元件樣式檔 (CSS)
– src/app/app.component.spec.ts 單元測試定義檔
– src/app/shared/index.ts 根元件的相關服務元件
– src/app/environments/environment.ts 環境變數設定
– src/app/index.ts 載入根元件的預設檔
24
src/index.html
25
根元件的 directive 宣告
咦?沒有載入任何 JavaScript 函式庫?
src/main.ts
26
啟用 Production 模式 (提升執行速度)
設定 AppModule 為啟動模組
src/app/app.module.ts
宣告跟 View 有關的元件
宣告要匯入此模組的外部模組
宣告要註冊的服務元件
宣告根元件
幾乎用不到此設定
src/app/app.component.ts
28
指令 (directive) 選擇器
元件網頁範本
元件 CSS 樣式
TypeScript 類別
類別中的屬性 (Property)
類別中的方法 (Method)
LIVE DEMO
Angular 2 實戰開發
29
資料繫結的四種方法 (Binding syntax)
• 內嵌繫結 ( interpolation )
{{property}}
• 屬性繫結 ( Property Binding )
[property]='statement'
• 事件繫結 ( Event Binding )
(event)='someMethod($event)'
• 雙向繫結 ( Two-way Binding )
[(ngModel)]='property'
30
範本參考變數 (Template reference variables)
• 在範本中任意 HTML 標籤套用 #name 語法
– 會在範本內建立一個名為 name 的區域變數
– 該 name 區域變數將只能用於目前元件範本中
– 該 name 區域變數將會儲存該標籤的 DOM 物件
– 你可以透過「事件繫結」將任意 DOM 物件中的任意屬
性傳回元件類別中 ( Component class )
• 以下這兩種是完全相等的語法 ( 使用 # 是語法糖 )
– #name
– ref-name
31
三種 Angular 指令 (Directives)
• 元件型指令
– 預設「元件」就是一個含有樣板的指令 (最常見)
• 屬性型指令
– 這種指令會修改元素的外觀或行為
– 例如內建的 NgStyle 或 NgClass 指令就可讓你自由的變更樣式
• 結構型指令 (Structure Directives)
– 這種指令會透過新增和刪除 DOM 元素來改變 DOM 結構
– 例如內建的 NgIf、NgFor 或 NgSwitch 就可以用來控制 DOM 結構
• 請注意 ngSwitch 前面不要加上 * 星號
• 請注意 ngIf 與 ngFor 與 ngSwitchDefault 與 ngSwitchCase 前面要加上 * 星號
32
https://github.com/miniasp/ng2demo
匯入 Http 模組與使用 Http 服務元件
• 匯入 HttpModule
• 注入 Http 服務元件
• 發出 HTTP GET 要求
• 訂閱 HTTP GET 執行結果
33
會不會覺得 Angular 2 很帥?
假的!
假的! (才怪)
相關連結
• Angular 2 官網 ( 官方簡體中文翻譯 )
• Angular 2 風格指南 (官方版)
• Angular 2 學習資源 (官方版)
• Angular 2 學習資源 (社群版)
• ng-conf 2016 – YouTube
• TypeScript - JavaScript that scales.
• TypeScript Handbook (中文版)
• 前端工程的夢幻逸品:Angular 2 開發框架介紹
• Angular 2 Fundamentals | AngularClass (免費 ng2 課程)
聯絡資訊
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebook.com/will.fans
• Will 保哥的噗浪
– http://www.plurk.com/willh/invite
• Will 保哥的推特
– https://twitter.com/Will_Huang

Weitere ähnliche Inhalte

Was ist angesagt?

ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革Will Huang
 
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Will Huang
 
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架Will Huang
 
Nuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的packageNuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的packageAlan Tsai
 
React.js what do you really mean?
React.js what do you really mean?React.js what do you really mean?
React.js what do you really mean?昱安 周
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例Will Huang
 
Angular js twmvc#17
Angular js twmvc#17Angular js twmvc#17
Angular js twmvc#17twMVC
 
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)Will Huang
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索Will Huang
 
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略Will Huang
 
Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017Will Huang
 
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式Will Huang
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式Will Huang
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)Will Huang
 
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)Will Huang
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!Will Huang
 
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹Alan Tsai
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統Hsu Ping Feng
 
Frontend Devops at Cloudinsight
Frontend Devops at CloudinsightFrontend Devops at Cloudinsight
Frontend Devops at CloudinsightYan Wang
 

Was ist angesagt? (20)

ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
 
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
 
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
 
Nuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的packageNuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的package
 
React.js what do you really mean?
React.js what do you really mean?React.js what do you really mean?
React.js what do you really mean?
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
 
Angular js twmvc#17
Angular js twmvc#17Angular js twmvc#17
Angular js twmvc#17
 
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
 
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
 
Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017
 
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
 
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
 
Vue
VueVue
Vue
 
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
 
Frontend Devops at Cloudinsight
Frontend Devops at CloudinsightFrontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
 

Andere mochten auch

Azure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
Azure Web App on Linux @ Global Azure Bootcamp 2017 TaiwanAzure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
Azure Web App on Linux @ Global Azure Bootcamp 2017 TaiwanWill Huang
 
Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Will Huang
 
簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )Will Huang
 
Growth Mindset 經驗分享
Growth Mindset 經驗分享Growth Mindset 經驗分享
Growth Mindset 經驗分享Will Huang
 
開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽Will Huang
 
初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎Will Huang
 
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管SQL Server 資料庫版本控管
SQL Server 資料庫版本控管Will Huang
 
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具Will Huang
 
簡介 GitHub 平台
簡介 GitHub 平台簡介 GitHub 平台
簡介 GitHub 平台Will Huang
 
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)Will Huang
 
快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)Will Huang
 
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)Will Huang
 
中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技Will Huang
 
git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用Will Huang
 
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWindows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWill Huang
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技Will Huang
 
從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術Will Huang
 

Andere mochten auch (17)

Azure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
Azure Web App on Linux @ Global Azure Bootcamp 2017 TaiwanAzure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
Azure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
 
Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰
 
簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )
 
Growth Mindset 經驗分享
Growth Mindset 經驗分享Growth Mindset 經驗分享
Growth Mindset 經驗分享
 
開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽
 
初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎
 
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管SQL Server 資料庫版本控管
SQL Server 資料庫版本控管
 
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
 
簡介 GitHub 平台
簡介 GitHub 平台簡介 GitHub 平台
簡介 GitHub 平台
 
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
 
快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)
 
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
 
中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技
 
git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用
 
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWindows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, Kubernetes
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
 
從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術
 

Ähnlich wie 快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)

Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVCjeffz
 
Backbone js and requirejs
Backbone js and requirejsBackbone js and requirejs
Backbone js and requirejsChi-wen Sun
 
Better use angular
Better use angularBetter use angular
Better use angularYanru Li
 
ASP.Net MVC Framework
ASP.Net MVC FrameworkASP.Net MVC Framework
ASP.Net MVC Framework國昭 張
 
改善 Angular 開發流程:你所不知道的 Schematics 程式碼產生器
改善 Angular 開發流程:你所不知道的 Schematics 程式碼產生器改善 Angular 開發流程:你所不知道的 Schematics 程式碼產生器
改善 Angular 開發流程:你所不知道的 Schematics 程式碼產生器Chieh Kai Yang
 
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Wade Huang
 
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式Justin Lin
 
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designMobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designJackson Tian
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Jollen Chen
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合Qiangning Hong
 
Clipper@datacon.2019.tw
Clipper@datacon.2019.twClipper@datacon.2019.tw
Clipper@datacon.2019.twWei-Yu Chen
 
谈谈模块化
谈谈模块化谈谈模块化
谈谈模块化衡锋 阳
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plusDongxu Yao
 
Kissy design
Kissy designKissy design
Kissy designyiming he
 
Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)Will Huang
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2luolonghao
 
Introduction to ASP.NET MVC and MVC 5 Features
Introduction to ASP.NET MVC and MVC 5 FeaturesIntroduction to ASP.NET MVC and MVC 5 Features
Introduction to ASP.NET MVC and MVC 5 FeaturesJeff Chu
 

Ähnlich wie 快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016) (20)

Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVC
 
Backbone js and requirejs
Backbone js and requirejsBackbone js and requirejs
Backbone js and requirejs
 
Better use angular
Better use angularBetter use angular
Better use angular
 
ASP.Net MVC Framework
ASP.Net MVC FrameworkASP.Net MVC Framework
ASP.Net MVC Framework
 
改善 Angular 開發流程:你所不知道的 Schematics 程式碼產生器
改善 Angular 開發流程:你所不知道的 Schematics 程式碼產生器改善 Angular 開發流程:你所不知道的 Schematics 程式碼產生器
改善 Angular 開發流程:你所不知道的 Schematics 程式碼產生器
 
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
 
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
 
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designMobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
 
Angularjs
AngularjsAngularjs
Angularjs
 
Mvc model
Mvc modelMvc model
Mvc model
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合
 
Clipper@datacon.2019.tw
Clipper@datacon.2019.twClipper@datacon.2019.tw
Clipper@datacon.2019.tw
 
谈谈模块化
谈谈模块化谈谈模块化
谈谈模块化
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
 
Kissy design
Kissy designKissy design
Kissy design
 
Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2
 
Introduction to ASP.NET MVC and MVC 5 Features
Introduction to ASP.NET MVC and MVC 5 FeaturesIntroduction to ASP.NET MVC and MVC 5 Features
Introduction to ASP.NET MVC and MVC 5 Features
 

Mehr von Will Huang

深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)Will Huang
 
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境Will Huang
 
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧Will Huang
 
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)Will Huang
 
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點Will Huang
 
RxJS 6 新手入門
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門Will Huang
 
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)Will Huang
 
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Will Huang
 
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)Will Huang
 
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Will Huang
 
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)Will Huang
 
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)Will Huang
 
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)Will Huang
 
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)Will Huang
 
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)Will Huang
 
以敏捷架構打造美國軟體外包專案的經驗談
以敏捷架構打造美國軟體外包專案的經驗談以敏捷架構打造美國軟體外包專案的經驗談
以敏捷架構打造美國軟體外包專案的經驗談Will Huang
 
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018Will Huang
 
迎接嶄新的Windows容器叢集架構:Kubernetes
迎接嶄新的Windows容器叢集架構:Kubernetes迎接嶄新的Windows容器叢集架構:Kubernetes
迎接嶄新的Windows容器叢集架構:KubernetesWill Huang
 
申請 Let's Encrypt 免費 SSL 憑證一次就上手
申請 Let's Encrypt 免費 SSL 憑證一次就上手申請 Let's Encrypt 免費 SSL 憑證一次就上手
申請 Let's Encrypt 免費 SSL 憑證一次就上手Will Huang
 

Mehr von Will Huang (19)

深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
 
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
 
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
 
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
 
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點
 
RxJS 6 新手入門
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門
 
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
 
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
 
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
 
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
 
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
 
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
 
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
 
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
 
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
 
以敏捷架構打造美國軟體外包專案的經驗談
以敏捷架構打造美國軟體外包專案的經驗談以敏捷架構打造美國軟體外包專案的經驗談
以敏捷架構打造美國軟體外包專案的經驗談
 
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
 
迎接嶄新的Windows容器叢集架構:Kubernetes
迎接嶄新的Windows容器叢集架構:Kubernetes迎接嶄新的Windows容器叢集架構:Kubernetes
迎接嶄新的Windows容器叢集架構:Kubernetes
 
申請 Let's Encrypt 免費 SSL 憑證一次就上手
申請 Let's Encrypt 免費 SSL 憑證一次就上手申請 Let's Encrypt 免費 SSL 憑證一次就上手
申請 Let's Encrypt 免費 SSL 憑證一次就上手
 

Kürzlich hochgeladen

函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 

Kürzlich hochgeladen (15)

函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 

快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)

  • 1. 快快樂樂學會 Angular 2 網站開發框架 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/ 適用 Angular 2.0.0-rc.5 版本
  • 9. ANGULAR 2 簡介 Angular 2 Introduction
  • 11. Angular 2 比 Angular 1 更好 • 速度更快 – 偵測變更:比 ng1 快 10 倍 – 渲染速度:比 ng1 快 5 倍 (Render & Re-render) • 範本編譯:支援 Template 預先編譯機制 – 更小的 Library Size ( 透過 webpack 自動合併 ) – 支援延遲載入機制與伺服器渲染機制 (Node.js & ASP.NET ) • 學習曲線更低 – 採用 TypeScript 語法更簡潔 ( 類別、介面、屬性、方法 ) – 移除超過 40+ 個 directives • 平台支援更強大 – 支援 Browser, Node.js, NativeScript, React Native, … 11
  • 13. Angular 2 的開發語言 • ES5 – 傳統 JavaScript 程式語言 ( IE9+ ) • ES 2015 – 此版本為 ES5 的「超集合」 – 具有新穎的 JavaScript 語言特性 ( let, const, for-of, … ) – 可透過 Babel 轉譯器將瀏覽器不支援的語法轉為 ES5 版本 • TypeScript – 此版本為 ES 2015 的「超集合」 – 具有強型別特性、內建 ES5 轉譯器 (Transpiler)、更好的工具支 援 • Dart – 非 JavaScript 家族的程式語言 – 具有強型別特性 13
  • 14. Angular 2 的開發工具 • Visual Studio Code (推薦) • Visual Studio 2015 • Sublime Text • WebStorm • Atom • Plunker 14
  • 15. Angular 2 頁面的組成 應用程式元件 + 樣板 + 樣式 ( AppComponent ) 頁首元件 + 樣板 + 樣式 ( HeaderComponent ) 子選單 元件 + 樣板 + 樣式 (AsideComponent) 15 主要內容 元件 + 樣板 + 樣式 (ArticleComponent)
  • 16. Angular 2 應用程式的組成 • App Component元件 • Child Component元件 • Services Component元件 • Pipe Component元件 模組 • AppModule
  • 17. Angular 2 元件的組成 範本 ( Template ) • HTML 版面配置 • HTML 部分片段 • 資料繫結 (Bindings) • 畫面命令 (Directives) 類別 ( Class ) • 建構式 (Constructor) • 屬性 (Properties) • 方法 (Methods) 中繼資料 ( Metadata ) • 裝飾器 (Decorator) • 針對類別 • 針對屬性 • 針對方法 • 針對參數 17
  • 18. 認識 Angular 元件的程式碼結構 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent { title = 'app works!'; } 18
  • 20. Angular 2 結構剖析 • Module 應用程式被切分成許多「模組」 • Component 每個模組下有許多「元件」 • Template 每個元件都可能有自己的「樣板」 • Metadata 每個元件都可以標示「中繼資料」 • Data Binding 樣板與元件屬性、方法可以進行綁定 • Directive 將 DOM 轉換為多功能的「宣告命令」 • Service 由「服務」集中管理資料與運算邏輯 • Dependency Injection 由「相依注入」機制管理物件生命週期 20
  • 21. 快快樂樂建立 ANGULAR 2 應用程式 Build your own Angular 2 Application 21
  • 22. 準備 Angular 2 開發環境 • 架設 Angular 2 開發環境說明文件 • 如何修改 Visual Studio Code 內建的 TypeScript 版本 • 關於 TypeScript 2.0 之後的模組定義檔 ( *.d.ts ) 22
  • 23. 使用 Angular CLI 建立專案範本 • 請務必在 NTFS 檔案系統執行相關命令 (Windows) • ng new demo1 – 初始化 Git 儲存庫 – 安裝 npm 相依套件 • cd demo1 • ng serve – http://localhost:4200 23
  • 24. 了解專案結構 • 首頁 HTML 與 Angular 2 主程式 – src/index.html 預設網站首頁 – src/main.ts 預設 Angular 2 啟動器 (主程式) • 公用檔案資料夾 – public/ 放置網站的相關資源檔案 (CSS,Image,Fonts,…) • 根元件 – src/app/app.module.ts 應用程式的NgModule定義檔 – src/app/app.component.ts 根元件主程式 – src/app/app.component.html 根元件範本檔 (Template) – src/app/app.component.css 根元件樣式檔 (CSS) – src/app/app.component.spec.ts 單元測試定義檔 – src/app/shared/index.ts 根元件的相關服務元件 – src/app/environments/environment.ts 環境變數設定 – src/app/index.ts 載入根元件的預設檔 24
  • 26. src/main.ts 26 啟用 Production 模式 (提升執行速度) 設定 AppModule 為啟動模組
  • 28. src/app/app.component.ts 28 指令 (directive) 選擇器 元件網頁範本 元件 CSS 樣式 TypeScript 類別 類別中的屬性 (Property) 類別中的方法 (Method)
  • 29. LIVE DEMO Angular 2 實戰開發 29
  • 30. 資料繫結的四種方法 (Binding syntax) • 內嵌繫結 ( interpolation ) {{property}} • 屬性繫結 ( Property Binding ) [property]='statement' • 事件繫結 ( Event Binding ) (event)='someMethod($event)' • 雙向繫結 ( Two-way Binding ) [(ngModel)]='property' 30
  • 31. 範本參考變數 (Template reference variables) • 在範本中任意 HTML 標籤套用 #name 語法 – 會在範本內建立一個名為 name 的區域變數 – 該 name 區域變數將只能用於目前元件範本中 – 該 name 區域變數將會儲存該標籤的 DOM 物件 – 你可以透過「事件繫結」將任意 DOM 物件中的任意屬 性傳回元件類別中 ( Component class ) • 以下這兩種是完全相等的語法 ( 使用 # 是語法糖 ) – #name – ref-name 31
  • 32. 三種 Angular 指令 (Directives) • 元件型指令 – 預設「元件」就是一個含有樣板的指令 (最常見) • 屬性型指令 – 這種指令會修改元素的外觀或行為 – 例如內建的 NgStyle 或 NgClass 指令就可讓你自由的變更樣式 • 結構型指令 (Structure Directives) – 這種指令會透過新增和刪除 DOM 元素來改變 DOM 結構 – 例如內建的 NgIf、NgFor 或 NgSwitch 就可以用來控制 DOM 結構 • 請注意 ngSwitch 前面不要加上 * 星號 • 請注意 ngIf 與 ngFor 與 ngSwitchDefault 與 ngSwitchCase 前面要加上 * 星號 32 https://github.com/miniasp/ng2demo
  • 33. 匯入 Http 模組與使用 Http 服務元件 • 匯入 HttpModule • 注入 Http 服務元件 • 發出 HTTP GET 要求 • 訂閱 HTTP GET 執行結果 33
  • 37. 相關連結 • Angular 2 官網 ( 官方簡體中文翻譯 ) • Angular 2 風格指南 (官方版) • Angular 2 學習資源 (官方版) • Angular 2 學習資源 (社群版) • ng-conf 2016 – YouTube • TypeScript - JavaScript that scales. • TypeScript Handbook (中文版) • 前端工程的夢幻逸品:Angular 2 開發框架介紹 • Angular 2 Fundamentals | AngularClass (免費 ng2 課程)
  • 38. 聯絡資訊 • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 – http://blog.miniasp.com/ • Will 保哥的技術交流中心 (臉書粉絲專頁) – http://www.facebook.com/will.fans • Will 保哥的噗浪 – http://www.plurk.com/willh/invite • Will 保哥的推特 – https://twitter.com/Will_Huang