32
前端也要起來 AngularJS + PolymerJS 實作分享 by Po-Ying Chen

AngularJS 社群 - PolymerJS / AngularJS 並用

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: AngularJS 社群 - PolymerJS / AngularJS 並用

前端也要” ”起來硬AngularJS + PolymerJS 實作分享 by Po-Ying Chen

Page 2: AngularJS 社群 - PolymerJS / AngularJS 並用

前端也要” ”起來硬AngularJS + PolymerJS 實作分享 by Po-Ying Chen

Page 3: AngularJS 社群 - PolymerJS / AngularJS 並用
Page 4: AngularJS 社群 - PolymerJS / AngularJS 並用
Page 5: AngularJS 社群 - PolymerJS / AngularJS 並用

8 個!!!

Page 6: AngularJS 社群 - PolymerJS / AngularJS 並用

8 個!!!

怎麼沒前端?

Page 7: AngularJS 社群 - PolymerJS / AngularJS 並用

AngularJS + PolymerJS打造 iloveck101 前端版本!

Page 8: AngularJS 社群 - PolymerJS / AngularJS 並用
Page 9: AngularJS 社群 - PolymerJS / AngularJS 並用
Page 11: AngularJS 社群 - PolymerJS / AngularJS 並用

poying/iloveck101

Page 12: AngularJS 社群 - PolymerJS / AngularJS 並用

為什麼要並⽤用 PolymerJS, AngularJS︖?!

⽽而且要怎麼要怎麼 ︖?分⼯工

Page 13: AngularJS 社群 - PolymerJS / AngularJS 並用

PolymerJS

Page 14: AngularJS 社群 - PolymerJS / AngularJS 並用

1. Custom Elements!2. Shadow DOM!3. HTML Imports!4. Pointer Events!5. Object. observe()

Page 15: AngularJS 社群 - PolymerJS / AngularJS 並用

範例中的 trackstart, trackend, track!就是基於 PointerEvents

Polymer/PointerGestures

Page 16: AngularJS 社群 - PolymerJS / AngularJS 並用

以及⽬目前還 的不是很好⽤用 Data-binding

Page 17: AngularJS 社群 - PolymerJS / AngularJS 並用

不像 AngularJS 這樣完整很多地⽅方

Page 18: AngularJS 社群 - PolymerJS / AngularJS 並用

PolymerJS 是個強⼤大、︑先進的 “View”

Page 19: AngularJS 社群 - PolymerJS / AngularJS 並用

我們可以拿 PolymerJS 部分 替代 Directive

Page 20: AngularJS 社群 - PolymerJS / AngularJS 並用

AngularJS

Page 21: AngularJS 社群 - PolymerJS / AngularJS 並用

Scope, Controller, Service…

Page 22: AngularJS 社群 - PolymerJS / AngularJS 並用

豐富的 module第三⽅方

Page 23: AngularJS 社群 - PolymerJS / AngularJS 並用

ui-router

Page 24: AngularJS 社群 - PolymerJS / AngularJS 並用

⾃自⼰己處理真的很悲劇...

polymerjs-tw/polymer-simple-router

Page 25: AngularJS 社群 - PolymerJS / AngularJS 並用

PolymerJS / AngularJS 稍微整理

Page 26: AngularJS 社群 - PolymerJS / AngularJS 並用

1.複雜的 Template 部分丟給 AngularJS!2.需要相互溝通的地⽅方也交給 AngularJS!3.可以元件化的部分盡量包成 Custom Element!4. Custom Element 裡處理掉低階 Eevent, API

Page 27: AngularJS 社群 - PolymerJS / AngularJS 並用

AngularJS 是 ⽔水泥

磚塊PolymerJS 是

Page 28: AngularJS 社群 - PolymerJS / AngularJS 並用

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

雙贏!

Page 29: AngularJS 社群 - PolymerJS / AngularJS 並用

吧!砌牆

Page 30: AngularJS 社群 - PolymerJS / AngularJS 並用

測試

Page 31: AngularJS 社群 - PolymerJS / AngularJS 並用

<link rel=“import”>插入 HTML 時機需要注意!