第一次寫SPA就上手
By AngularJS
OutLine
- 什麼是SPA(Single Page Application)
- 使用jQuery與AngularJS開發的差異
- 透過SPA開發範例，講解AngularJS運作模式
什麼是SPA
透過JS動態更換網頁上的內容
達到使用者不需要換頁就可以瀏覽整個網站的網站架構
為什麼要SPA
有什麼好處?!
-
所有資源不需要重新載入
-
每次只需傳輸更新部分畫面的資料，所占資源較少
- 使用者體驗較好
4. 潮!!
典型的SPA網站
一切聽起來都相當美沒好
怎麼開發SPA
就用熱血、男人與
手刻的浪漫吧!!
那些年我硬上的jQuery?!
開發都不會遇到問題嗎?
DOM Manipulation, History
DOM Manipulation, History
Module Loading, Routing
DOM Manipulation, History
Module Loading, Routing
Caching, Object Modeling
DOM Manipulation, History
Module Loading, Routing
Caching, Object Modeling
Data Binding, Ajax/Promises
SEO
DOM Manipulation, History
Module Loading, Routing
Caching, Object Modeling
Data Binding, Ajax/Promises
View Loading
彷彿難以跨越的高牆
在高的牆
都有更高的巨人來破門
終於要講正題了吧!!
AnuglarJS 五大特點
- 雙向綁定
- 使用模板
- MVC
- 依賴注入
- Directive
-
Testing?!
使用jQuery與Angularjs的差異
但...
用jQuery來對比AngularJS
根本不合理
一個是協助你操作DOM的JS Library
一個是開發網站的JS Framework
重點是開發的思維完全反轉
jQuery
控制你的DOM是很簡單的
但控制你的程式碼變成很困難
AngularJS
你大部分時間只要控制Model以及View的配合
學習AngularJS
別讓過去的jQuery開發經驗限制了你的極限
DEMO
DEMO
SPA
Step By Step
讓我們來打造一個簡單的SPA Blog
-
列表頁
-
內容頁
-
編輯頁