iT邦幫忙

DAY 19
3

你不能不知道的Polymer開發實戰系列 第 19

AngularJS 的後宮佳麗 (上)

今日目標: 在 AngularJS 中使用 Polymer 元件

本來題目想寫AngularJS與PolymerJS聯姻,但說聯姻好像不大對,Polymer比較像是AngularJS的後宮佳麗 XD

AngularJS與Polymer兩個身為Google提供給Web開發者的重要專案,AngularJS原本只是Google內部為了解決本身開發上的困擾,自幹的框架,推出後獲得廣大迴響,前景看好 ! Polymer則是Google在有計劃與願景下所誕生的專案,背負著承先啟後的重責大任。

AngujarJS和Polymer的關係,就像是下面這張圖

Polymer的定位很清楚,就是迎接未來WebComponent時代的來臨,至於這時代什麼時候來臨,就得仰賴各家Browser廠商的一同努力了。現在各家Browser支援程度不一,Polymer定位就是把路鋪平,讓開發者不用考慮Browser支援程度,現在就可以放心使用WebComponent進行開發。

AngularJS身為一個開發Web App的框架,強大就不用提了,但比較弱的部分恐怕就是對Component封裝的支援能力。directive是用來包裝成為Component的重要關鍵,但有兩個問題是根本上沒解決的

  1. 要用directive,就得學 AngujarJS
  2. 無法100%封裝元件

上面這兩個問題唯有從瀏覽器實作才能根本上解決,在各家瀏覽器還沒100%一致時,Polymer就是用來解決支援的差異性。當然啦,為了封裝元件能便利一些,Polymer也有自己的two-way binding,這和AngujarJS當然有重疊到。但如果我們從元件層級與應用角度這兩個面向來看,其實就還好,而且兩個的binding都很相像,所以接下來就來介紹怎麼在AngularJS中使用Polymer元件,讓AngularJS如虎添翼!

AngujarJS官方說法...

Polymer傳教士 Eric 分享了AngularJS 如何使用的 Youtube,看完就懂大半了,這邊分享一下我照著Eric範例試玩心得 (簡化範例版)

[Github]

elements 目錄: 分別放 AngularJS和Polymer製作的元件

index.html 範例程式

第5~6行: 套css檔

第7行: 載入使用 angujarJS

第8行: 載入platform.js (Polymer),使用 WebComponent 元件

第9行: 載入用Polymer開發的元件

第10行: 載入用AngularJS開發的元件

AngularJS 要使用 Polymer 包裝的 WebComponent元件,有幾點特別抓出來說的

  1. Polymer元件屬性,可以直接接收 ng-model 控制,沒有問題

    input 欄位設定為ng-model,當輸入值改變時,在Polymer包裝元件、AngularJS元件都是相同設定方式

[Add tab] 這按鈕用來控制Polymer元件,增加頁籤。
第43行,用JS標準API建立自定元件 wc-panel ,第46行,用JS標準API放到wc-tabs這自定元件肚子內

酷啊,用自定元件的開發者,只要把自定元件當成一般的HTML元素,了解元件API就可以使用了。

待續...

參考資料


上一篇
我所知道的元件聖殿、傳教士、軍火庫
下一篇
AngularJS 的後宮佳麗 (下)
系列文
你不能不知道的Polymer開發實戰30

1 則留言

0
jqman
iT邦研究生 4 級 ‧ 2014-10-09 08:45:15

好有趣又直覺的比喻~ ^ ^

我要留言

立即登入留言