SlideShare una empresa de Scribd logo
1 de 20
快快樂樂學 Angular 2 開發框架
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格:http://blog.miniasp.com/
新手上路之 40 分鐘學會 Angular 2 網站開發框架
ANGULAR 2 簡介
Angular 2 Introduction
Angular 2 新特色
• 效能改進 (Performance)
– 偵測變更:比 ng1 快 10 倍
– 渲染速度:比 ng1 快 5 倍 (Render & Re-render)
– 範本編譯:支援 Template 預先編譯機制
– 更小的 Library Size 與延遲載入機制
– 支援伺服器渲染機制 (Node.js & ASP.NET )
• 高生產力 (Productivity)
– 開發應用程式能夠用更簡潔的語法讓團隊更加容易上手跟維護
– 更強大的開發工具 Augury
– 移除超過 40+ 個 directives
• 多樣平台 (Versatility)
– 支援 Browser, Node.js, NativeScript, and more … 3
從框架轉向平台
4
Angular 2 的開發語言
TypeScrip
t
ES 2016
ES 2015
ES5
5
Angular 2 的開發語言
• ES5
– 傳統 JavaScript 程式語言 ( IE9+ )
• ES 2015
– 此版本為 ES5 的「超集合」
– 具有新穎的 JavaScript 語言特性 ( let, const, for-of, … )
– 可透過 Babel 轉譯器將瀏覽器不支援的語法轉為 ES5 版本
• TypeScript
– 此版本為 ES 2015 的「超集合」
– 具有強型別特性、內建 ES5 轉譯器 (Transpiler)、更好的工具支
援
• Dart
– 非 JavaScript 家族的程式語言
– 具有強型別特性 6
Angular 2 的開發工具
• Visual Studio Code
• Visual Studio 2015
• Sublime Text
• WebStorm
• Atom
• Plunker
7
Angular 2 應用程式的組成
• App Component元件
• Child Component元件
• Services Component元件
• Pipe Component元件
Angular 2 頁面的組成
應用程式元件 + 樣板 + 樣式
( AppComponent )
頁首元件 + 樣板 + 樣式
( HeaderComponent )
子選單
元件 + 樣板 + 樣式
(AsideComponent)
9
主要內容
元件 + 樣板 + 樣式
(ArticleComponent)
Angular 2 結構剖析
10
Angular 2 結構剖析
• Module 應用程式被切分成許多「模組」
• Component 每個模組下有許多「元件」
• Template 每個元件都可能有自己的「樣板」
• Metadata 每個元件都可以標示「中繼資料」
• Data Binding 樣板與元件屬性、方法可以進行綁定
• Directive 將 DOM 轉換為多功能的「宣告命令」
• Service 由「服務」集中管理資料與運算邏輯
• Dependency Injection 由「相依注入」機制管理物件生命週期
11
Angular 2 元件的組成
範本
( Template )
• HTML 版面配置
• HTML 部分片段
• 資料繫結 (Bindings)
• 畫面命令 (Directives)
類別
( Class )
• 建構式 (Constructor)
• 屬性 (Properties)
• 方法 (Methods)
中繼資料
( Metadata )
• 裝飾器 (Decorator)
• 針對類別
• 針對屬性
• 針對方法
• 針對參數
12
建立 ANGULAR 2 應用程式
Build your Angular 2 Application
13
準備開發環境
• 完整移除 Node.js 的方法 (Windows)
– 先手動移除 Node.js 應用程式
– del "%USERPROFILE%.npmrc"
– rmdir /s/q "C:Program Filesnodejs"
– rmdir /s/q "%APPDATA%npm"
– rmdir /s/q "%APPDATA%npm-cache"
• 安裝 Node.js v6.2.2 (npm3) 與 Visual Studio Code
• 安裝必備 npm 套件
– npm install -g gulp yo webpack rimraf
– npm install -g typescript typings angular-cli
– npm install -g eslint tslint
14
使用 Angular CLI 建立專案範本
• 請務必在 NTFS 檔案系統執行相關命令 (Windows)
• ng new demo1
– 初始化 Git 儲存庫
– 安裝 npm 相依套件
• cd demo1
• npm install ( 這是 1.0.0-beta.8 已知問題 )
– Error: Cannot find module 'exists-sync'
• ng build
• ng serve (若加上 -prod 同時也會關閉 Live Reload)
– http://localhost:4200
– http://localhost:49152 (Live Reload)
• ng generate component header
• ng generate service search
15
了解專案結構
• 首頁
– src/index.html 預設網站首頁
• 啟動器
– src/main.ts 預設 Angular 2 啟動器
• 根元件
– src/app/index.ts 載入根元件的預設檔
– src/app/environment.ts 環境變數設定
– src/app/app.component.ts 根元件主程式
– src/app/app.component.spec.ts 單元測試定義檔
– src/app/app.component.html 根元件範本檔
(Template)
– src/app/app.component.css 根元件樣式檔 (CSS)
– src/app/shared/index.ts 根元件的相關服務元件
16
資料繫結的四種方法 (Binding syntax)
• 內嵌繫結 ( interpolation )
{{property}}
• 屬性繫結 ( Property Binding )
[property]='statement'
• 事件繫結 ( Event Binding )
(event)='someMethod($event)'
• 雙向繫結 ( Two-way Binding )
[(ngModel)]='property'
17
結構式命令 (Structure Directives)
• 判斷式
*ngIf='products && products.length'
ngSwitch / ngSwitchWhen / ngSwitchDefault
• 迴圈
*ngFor='let product of products'
18
相關連結
• 今日 Live Demo 原始碼
https://github.com/doggy8088/ctjs2016-ng2demo
– 完整開發歷程記錄 (含每個版本註解)
https://github.com/doggy8088/ctjs2016-ng2demo/commits/master
– 現場 demo code 完整版
https://github.com/doggy8088/ctjs2016-ng2demo/commits/livedemo
• Angular 2 官網
• Angular 2 官網 - 簡體中文翻譯 (高品質)
• Angular CLI (命令列工具)
• ReactiveX ( RxJS on GitHub )
• RxMarbles: Interactive diagrams of Rx Observables
• TypeScript - JavaScript that scales.
• TypeScript Handbook (中文版)
19
聯絡資訊
• 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

Más contenido relacionado

La actualidad más candente

Web開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor AppWeb開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor AppTomomitsuKusaba
 
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)NTT DATA Technology & Innovation
 
Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門Etsuji Nakai
 
Kubernetes Architecture with Components
 Kubernetes Architecture with Components Kubernetes Architecture with Components
Kubernetes Architecture with ComponentsAjeet Singh
 
Intro to Helm for Kubernetes
Intro to Helm for KubernetesIntro to Helm for Kubernetes
Intro to Helm for KubernetesCarlos E. Salazar
 
Ansibleで始めるインフラ構築自動化
Ansibleで始めるインフラ構築自動化Ansibleで始めるインフラ構築自動化
Ansibleで始めるインフラ構築自動化dcubeio
 
OpenStackで始めるクラウド環境構築入門
OpenStackで始めるクラウド環境構築入門OpenStackで始めるクラウド環境構築入門
OpenStackで始めるクラウド環境構築入門VirtualTech Japan Inc.
 
rsyncのちょっとイイ話
rsyncのちょっとイイ話rsyncのちょっとイイ話
rsyncのちょっとイイ話Kazuhiro Oinuma
 
第9回Jenkins勉強会 超簡単Pipeline講座
第9回Jenkins勉強会 超簡単Pipeline講座第9回Jenkins勉強会 超簡単Pipeline講座
第9回Jenkins勉強会 超簡単Pipeline講座Hiroko Tamagawa
 
kube-system落としてみました
kube-system落としてみましたkube-system落としてみました
kube-system落としてみましたShuntaro Saiba
 
Dockerを支える技術
Dockerを支える技術Dockerを支える技術
Dockerを支える技術Etsuji Nakai
 
BuildKitでLazy Pullを有効にしてビルドを早くする話
BuildKitでLazy Pullを有効にしてビルドを早くする話BuildKitでLazy Pullを有効にしてビルドを早くする話
BuildKitでLazy Pullを有効にしてビルドを早くする話Kohei Tokunaga
 
GKE に飛んでくるトラフィックを 自由自在に操る力 | 第 10 回 Google Cloud INSIDE Games & Apps Online
GKE に飛んでくるトラフィックを 自由自在に操る力 | 第 10 回 Google Cloud INSIDE Games & Apps OnlineGKE に飛んでくるトラフィックを 自由自在に操る力 | 第 10 回 Google Cloud INSIDE Games & Apps Online
GKE に飛んでくるトラフィックを 自由自在に操る力 | 第 10 回 Google Cloud INSIDE Games & Apps OnlineGoogle Cloud Platform - Japan
 
Harbor RegistryのReplication機能
Harbor RegistryのReplication機能Harbor RegistryのReplication機能
Harbor RegistryのReplication機能Masanori Nara
 
Automation with ansible
Automation with ansibleAutomation with ansible
Automation with ansibleKhizer Naeem
 
Kuberneteの運用を支えるGitOps
Kuberneteの運用を支えるGitOpsKuberneteの運用を支えるGitOps
Kuberneteの運用を支えるGitOpsshunki fujiwara
 
組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontends組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontendsPIXTA Inc.
 
微服務對IT人員的衝擊
微服務對IT人員的衝擊微服務對IT人員的衝擊
微服務對IT人員的衝擊Philip Zheng
 
Why NGINX Plus/NGINX Controller for NGINX OSS users
Why NGINX Plus/NGINX Controller for NGINX OSS usersWhy NGINX Plus/NGINX Controller for NGINX OSS users
Why NGINX Plus/NGINX Controller for NGINX OSS usersNGINX, Inc.
 

La actualidad más candente (20)

Web開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor AppWeb開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor App
 
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
 
Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門
 
Kubernetes Architecture with Components
 Kubernetes Architecture with Components Kubernetes Architecture with Components
Kubernetes Architecture with Components
 
Intro to Helm for Kubernetes
Intro to Helm for KubernetesIntro to Helm for Kubernetes
Intro to Helm for Kubernetes
 
Ansibleで始めるインフラ構築自動化
Ansibleで始めるインフラ構築自動化Ansibleで始めるインフラ構築自動化
Ansibleで始めるインフラ構築自動化
 
OpenStackで始めるクラウド環境構築入門
OpenStackで始めるクラウド環境構築入門OpenStackで始めるクラウド環境構築入門
OpenStackで始めるクラウド環境構築入門
 
rsyncのちょっとイイ話
rsyncのちょっとイイ話rsyncのちょっとイイ話
rsyncのちょっとイイ話
 
第9回Jenkins勉強会 超簡単Pipeline講座
第9回Jenkins勉強会 超簡単Pipeline講座第9回Jenkins勉強会 超簡単Pipeline講座
第9回Jenkins勉強会 超簡単Pipeline講座
 
kube-system落としてみました
kube-system落としてみましたkube-system落としてみました
kube-system落としてみました
 
Dockerを支える技術
Dockerを支える技術Dockerを支える技術
Dockerを支える技術
 
BuildKitでLazy Pullを有効にしてビルドを早くする話
BuildKitでLazy Pullを有効にしてビルドを早くする話BuildKitでLazy Pullを有効にしてビルドを早くする話
BuildKitでLazy Pullを有効にしてビルドを早くする話
 
GKE に飛んでくるトラフィックを 自由自在に操る力 | 第 10 回 Google Cloud INSIDE Games & Apps Online
GKE に飛んでくるトラフィックを 自由自在に操る力 | 第 10 回 Google Cloud INSIDE Games & Apps OnlineGKE に飛んでくるトラフィックを 自由自在に操る力 | 第 10 回 Google Cloud INSIDE Games & Apps Online
GKE に飛んでくるトラフィックを 自由自在に操る力 | 第 10 回 Google Cloud INSIDE Games & Apps Online
 
Harbor RegistryのReplication機能
Harbor RegistryのReplication機能Harbor RegistryのReplication機能
Harbor RegistryのReplication機能
 
Automation with ansible
Automation with ansibleAutomation with ansible
Automation with ansible
 
Kuberneteの運用を支えるGitOps
Kuberneteの運用を支えるGitOpsKuberneteの運用を支えるGitOps
Kuberneteの運用を支えるGitOps
 
組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontends組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontends
 
微服務對IT人員的衝擊
微服務對IT人員的衝擊微服務對IT人員的衝擊
微服務對IT人員的衝擊
 
[GKE & Spanner 勉強会] GKE 入門
[GKE & Spanner 勉強会] GKE 入門[GKE & Spanner 勉強会] GKE 入門
[GKE & Spanner 勉強会] GKE 入門
 
Why NGINX Plus/NGINX Controller for NGINX OSS users
Why NGINX Plus/NGINX Controller for NGINX OSS usersWhy NGINX Plus/NGINX Controller for NGINX OSS users
Why NGINX Plus/NGINX Controller for NGINX OSS users
 

Destacado

Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)振揚 陳
 
初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎Will Huang
 
Http cache 的優化
Http cache 的優化Http cache 的優化
Http cache 的優化振揚 陳
 
帶領團隊討論與思考,從學「問」開始
帶領團隊討論與思考,從學「問」開始帶領團隊討論與思考,從學「問」開始
帶領團隊討論與思考,從學「問」開始Steven Tseng
 
ORID焦點討論法 - 白話入門篇
ORID焦點討論法 - 白話入門篇ORID焦點討論法 - 白話入門篇
ORID焦點討論法 - 白話入門篇Chuang Shu-Ting
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技Will Huang
 

Destacado (6)

Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)
 
初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎
 
Http cache 的優化
Http cache 的優化Http cache 的優化
Http cache 的優化
 
帶領團隊討論與思考,從學「問」開始
帶領團隊討論與思考,從學「問」開始帶領團隊討論與思考,從學「問」開始
帶領團隊討論與思考,從學「問」開始
 
ORID焦點討論法 - 白話入門篇
ORID焦點討論法 - 白話入門篇ORID焦點討論法 - 白話入門篇
ORID焦點討論法 - 白話入門篇
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
 

Similar a 快快樂樂學 Angular 2 開發框架

ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索Will Huang
 
前端自動化工具
前端自動化工具前端自動化工具
前端自動化工具國昭 張
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node jsXuefeng Zhang
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程Simon Su
 
这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkitLainZQ
 
從軟體開發角度
談 Docker 的應用
從軟體開發角度
談 Docker 的應用從軟體開發角度
談 Docker 的應用
從軟體開發角度
談 Docker 的應用謝 宗穎
 
Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)Will Huang
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰Scourgen Hong
 
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計Amigo 陳兆祥
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)Will Huang
 
Nodejs & NAE
Nodejs & NAENodejs & NAE
Nodejs & NAEq3boy
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式Will Huang
 
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹wantingj
 
Continuous integration
Continuous integrationContinuous integration
Continuous integrationnetdbncku
 
Vic weekly learning_20160504
Vic weekly learning_20160504Vic weekly learning_20160504
Vic weekly learning_20160504LearningTech
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合Qiangning Hong
 
Software Engineer Talk
Software Engineer TalkSoftware Engineer Talk
Software Engineer TalkLarry Cai
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 GulpYvonne Yu
 

Similar a 快快樂樂學 Angular 2 開發框架 (20)

ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索
 
前端自動化工具
前端自動化工具前端自動化工具
前端自動化工具
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node js
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
 
这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit
 
從軟體開發角度
談 Docker 的應用
從軟體開發角度
談 Docker 的應用從軟體開發角度
談 Docker 的應用
從軟體開發角度
談 Docker 的應用
 
Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
 
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
 
Grunt
Grunt Grunt
Grunt
 
Nodejs & NAE
Nodejs & NAENodejs & NAE
Nodejs & NAE
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
 
Continuous integration
Continuous integrationContinuous integration
Continuous integration
 
Vic weekly learning_20160504
Vic weekly learning_20160504Vic weekly learning_20160504
Vic weekly learning_20160504
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合
 
Software Engineer Talk
Software Engineer TalkSoftware Engineer Talk
Software Engineer Talk
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 Gulp
 

Más de 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
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索Will Huang
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!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
 
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)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
 
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點Will Huang
 
RxJS 6 新手入門
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門Will Huang
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)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
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)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
 

Más de Will Huang (20)

深入理解 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 開發環境
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
 
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
 
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
 
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+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)
Micro-frontends with Angular 10 (Modern Web 2020)
 
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點
 
RxJS 6 新手入門
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
 
你不可不知的 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 开发者大会)
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
 
利用.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 高峰會)
 

Último

20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...Jamie (Taka) Wang
 
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdfJamie (Taka) Wang
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.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
 
函數畫圖_習題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
 
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...Jamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdfJamie (Taka) Wang
 
函數微分_習題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
 
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdfJamie (Taka) Wang
 
函數畫圖_習題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
 
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdfJamie (Taka) Wang
 
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdfJamie (Taka) Wang
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdfJamie (Taka) Wang
 
20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdfJamie (Taka) Wang
 
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdfJamie (Taka) Wang
 

Último (17)

20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
 
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
 
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf
 
20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf
 
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
 

快快樂樂學 Angular 2 開發框架

  • 1. 快快樂樂學 Angular 2 開發框架 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/ 新手上路之 40 分鐘學會 Angular 2 網站開發框架
  • 2. ANGULAR 2 簡介 Angular 2 Introduction
  • 3. Angular 2 新特色 • 效能改進 (Performance) – 偵測變更:比 ng1 快 10 倍 – 渲染速度:比 ng1 快 5 倍 (Render & Re-render) – 範本編譯:支援 Template 預先編譯機制 – 更小的 Library Size 與延遲載入機制 – 支援伺服器渲染機制 (Node.js & ASP.NET ) • 高生產力 (Productivity) – 開發應用程式能夠用更簡潔的語法讓團隊更加容易上手跟維護 – 更強大的開發工具 Augury – 移除超過 40+ 個 directives • 多樣平台 (Versatility) – 支援 Browser, Node.js, NativeScript, and more … 3
  • 6. Angular 2 的開發語言 • ES5 – 傳統 JavaScript 程式語言 ( IE9+ ) • ES 2015 – 此版本為 ES5 的「超集合」 – 具有新穎的 JavaScript 語言特性 ( let, const, for-of, … ) – 可透過 Babel 轉譯器將瀏覽器不支援的語法轉為 ES5 版本 • TypeScript – 此版本為 ES 2015 的「超集合」 – 具有強型別特性、內建 ES5 轉譯器 (Transpiler)、更好的工具支 援 • Dart – 非 JavaScript 家族的程式語言 – 具有強型別特性 6
  • 7. Angular 2 的開發工具 • Visual Studio Code • Visual Studio 2015 • Sublime Text • WebStorm • Atom • Plunker 7
  • 8. Angular 2 應用程式的組成 • App Component元件 • Child Component元件 • Services Component元件 • Pipe Component元件
  • 9. Angular 2 頁面的組成 應用程式元件 + 樣板 + 樣式 ( AppComponent ) 頁首元件 + 樣板 + 樣式 ( HeaderComponent ) 子選單 元件 + 樣板 + 樣式 (AsideComponent) 9 主要內容 元件 + 樣板 + 樣式 (ArticleComponent)
  • 11. Angular 2 結構剖析 • Module 應用程式被切分成許多「模組」 • Component 每個模組下有許多「元件」 • Template 每個元件都可能有自己的「樣板」 • Metadata 每個元件都可以標示「中繼資料」 • Data Binding 樣板與元件屬性、方法可以進行綁定 • Directive 將 DOM 轉換為多功能的「宣告命令」 • Service 由「服務」集中管理資料與運算邏輯 • Dependency Injection 由「相依注入」機制管理物件生命週期 11
  • 12. Angular 2 元件的組成 範本 ( Template ) • HTML 版面配置 • HTML 部分片段 • 資料繫結 (Bindings) • 畫面命令 (Directives) 類別 ( Class ) • 建構式 (Constructor) • 屬性 (Properties) • 方法 (Methods) 中繼資料 ( Metadata ) • 裝飾器 (Decorator) • 針對類別 • 針對屬性 • 針對方法 • 針對參數 12
  • 13. 建立 ANGULAR 2 應用程式 Build your Angular 2 Application 13
  • 14. 準備開發環境 • 完整移除 Node.js 的方法 (Windows) – 先手動移除 Node.js 應用程式 – del "%USERPROFILE%.npmrc" – rmdir /s/q "C:Program Filesnodejs" – rmdir /s/q "%APPDATA%npm" – rmdir /s/q "%APPDATA%npm-cache" • 安裝 Node.js v6.2.2 (npm3) 與 Visual Studio Code • 安裝必備 npm 套件 – npm install -g gulp yo webpack rimraf – npm install -g typescript typings angular-cli – npm install -g eslint tslint 14
  • 15. 使用 Angular CLI 建立專案範本 • 請務必在 NTFS 檔案系統執行相關命令 (Windows) • ng new demo1 – 初始化 Git 儲存庫 – 安裝 npm 相依套件 • cd demo1 • npm install ( 這是 1.0.0-beta.8 已知問題 ) – Error: Cannot find module 'exists-sync' • ng build • ng serve (若加上 -prod 同時也會關閉 Live Reload) – http://localhost:4200 – http://localhost:49152 (Live Reload) • ng generate component header • ng generate service search 15
  • 16. 了解專案結構 • 首頁 – src/index.html 預設網站首頁 • 啟動器 – src/main.ts 預設 Angular 2 啟動器 • 根元件 – src/app/index.ts 載入根元件的預設檔 – src/app/environment.ts 環境變數設定 – src/app/app.component.ts 根元件主程式 – src/app/app.component.spec.ts 單元測試定義檔 – src/app/app.component.html 根元件範本檔 (Template) – src/app/app.component.css 根元件樣式檔 (CSS) – src/app/shared/index.ts 根元件的相關服務元件 16
  • 17. 資料繫結的四種方法 (Binding syntax) • 內嵌繫結 ( interpolation ) {{property}} • 屬性繫結 ( Property Binding ) [property]='statement' • 事件繫結 ( Event Binding ) (event)='someMethod($event)' • 雙向繫結 ( Two-way Binding ) [(ngModel)]='property' 17
  • 18. 結構式命令 (Structure Directives) • 判斷式 *ngIf='products && products.length' ngSwitch / ngSwitchWhen / ngSwitchDefault • 迴圈 *ngFor='let product of products' 18
  • 19. 相關連結 • 今日 Live Demo 原始碼 https://github.com/doggy8088/ctjs2016-ng2demo – 完整開發歷程記錄 (含每個版本註解) https://github.com/doggy8088/ctjs2016-ng2demo/commits/master – 現場 demo code 完整版 https://github.com/doggy8088/ctjs2016-ng2demo/commits/livedemo • Angular 2 官網 • Angular 2 官網 - 簡體中文翻譯 (高品質) • Angular CLI (命令列工具) • ReactiveX ( RxJS on GitHub ) • RxMarbles: Interactive diagrams of Rx Observables • TypeScript - JavaScript that scales. • TypeScript Handbook (中文版) 19
  • 20. 聯絡資訊 • 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