前端也要”
AngularJS + PolymerJS 實作分享

硬

”起來
by Po-Ying Chen
硬

前端也要”
AngularJS + PolymerJS 實作分享

”起來
by Po-Ying Chen
8 個!!!
8 個!!!

怎麼沒前端?
AngularJS + PolymerJS
打造 iloveck101 前端版本!
快硬起來!!

by 徐敏倚
poying/iloveck101
為什麼要並⽤用 PolymerJS, AngularJS︖?!
⽽而且要怎麼要怎麼

分⼯工︖?
PolymerJS
1. Custom Elements!
2. Shadow DOM!
3. HTML Imports!
4. Pointer Events!
5. Object. observe()
範例中的 trackstart, trackend, track!
就是基於 PointerEvents
Polymer/PointerGestures
以及⽬目前還 不是很好⽤用 的 Data-binding
很多地⽅方 不像 AngularJS 這樣完整
PolymerJS 是個強⼤大、︑先進的 “View”
我們可以拿 PolymerJS 替代 部分 Directive
AngularJS
Scope, Controller, Service…
豐富的

第三⽅方 module
ui-router
⾃自⼰己處理真的很悲劇...

polymerjs-tw/polymer-simple-router
PolymerJS / AngularJS 稍微整理
1. 複雜的 Template 部分丟給 AngularJS!
2. 需要相互溝通的地⽅方也交給 AngularJS!
3. 可以元件化的部分盡量包成 Custom Element!
4. Custom Element 裡處理掉低階 Eeven...
AngularJS 是

⽔水泥

PolymerJS 是

磚塊
兩邊處理的事情都更為單純

雙贏!
砌牆 吧!
測試
<link rel=“import”>
插入 HTML 時機需要注意!
快點給我
結束!!

by 徐敏倚
AngularJS 社群 - PolymerJS / AngularJS 並用
AngularJS 社群 - PolymerJS / AngularJS 並用
AngularJS 社群 - PolymerJS / AngularJS 並用
AngularJS 社群 - PolymerJS / AngularJS 並用
Upcoming SlideShare
Loading in …5
×

AngularJS 社群 - PolymerJS / AngularJS 並用

1,172 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,172
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AngularJS 社群 - PolymerJS / AngularJS 並用

  1. 1. 前端也要” AngularJS + PolymerJS 實作分享 硬 ”起來 by Po-Ying Chen
  2. 2. 硬 前端也要” AngularJS + PolymerJS 實作分享 ”起來 by Po-Ying Chen
  3. 3. 8 個!!!
  4. 4. 8 個!!! 怎麼沒前端?
  5. 5. AngularJS + PolymerJS 打造 iloveck101 前端版本!
  6. 6. 快硬起來!! by 徐敏倚
  7. 7. poying/iloveck101
  8. 8. 為什麼要並⽤用 PolymerJS, AngularJS︖?! ⽽而且要怎麼要怎麼 分⼯工︖?
  9. 9. PolymerJS
  10. 10. 1. Custom Elements! 2. Shadow DOM! 3. HTML Imports! 4. Pointer Events! 5. Object. observe()
  11. 11. 範例中的 trackstart, trackend, track! 就是基於 PointerEvents Polymer/PointerGestures
  12. 12. 以及⽬目前還 不是很好⽤用 的 Data-binding
  13. 13. 很多地⽅方 不像 AngularJS 這樣完整
  14. 14. PolymerJS 是個強⼤大、︑先進的 “View”
  15. 15. 我們可以拿 PolymerJS 替代 部分 Directive
  16. 16. AngularJS
  17. 17. Scope, Controller, Service…
  18. 18. 豐富的 第三⽅方 module
  19. 19. ui-router
  20. 20. ⾃自⼰己處理真的很悲劇...
 polymerjs-tw/polymer-simple-router
  21. 21. PolymerJS / AngularJS 稍微整理
  22. 22. 1. 複雜的 Template 部分丟給 AngularJS! 2. 需要相互溝通的地⽅方也交給 AngularJS! 3. 可以元件化的部分盡量包成 Custom Element! 4. Custom Element 裡處理掉低階 Eevent, API
  23. 23. AngularJS 是 ⽔水泥 PolymerJS 是 磚塊
  24. 24. 兩邊處理的事情都更為單純 雙贏!
  25. 25. 砌牆 吧!
  26. 26. 測試
  27. 27. <link rel=“import”> 插入 HTML 時機需要注意!
  28. 28. 快點給我 結束!! by 徐敏倚

×