今日目標: 在 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 的未來
• AngularJS 與 Polymer的角色定位
• AngujarJS 中使用Polymer元件影片解說
• 原始範例 Github