Download to read offline
![AngularJSから使う
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/angular/angular.js"></script>
<script src=“bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="my-chart.html">
</head>
<body ng-app="app">
<div ng-controller="MainController">
<span>{{hoge}}</span>
<my-chart></my-chart>
</div>
<script>
angular.module('app', [])
.controller('MainController', function ($scope) {
$scope.hoge = 'hoge';
});
</script>
</body>
</html>
index.html
12
テンプレートの中でそのまま使える！](https://image.slidesharecdn.com/20150830ngkyoto-150830051338-lva1-app6892/85/Polymer-12-320.jpg)
Polymerやってみた
- 1. 2015/08/30 ng-kyoto AngularMeetup #2 Polymerやってみた おのうえ(@_likr) 1
- 2. 自己紹介 ✤ おのうえ（@_likr） ✤ ng-kyoto、GDGKobeスタッフ ✤ 大学院でWebベース可視化システムの研究・開発 ✤ こわくない 2
- 3. Polymer ✤ Google主導のオープンソースフレームワーク https://www.polymer-project.org/ ✤ WebComponents+ α ✤ Webアプリ内の再利用性の高い機能を コンポーネント化し利用しやすくする仕組み 3
- 4. PolymerElementを使う $ bower installhoge-element <!DOCTYPE html> <html> <head> <script src=“bower_components/webcomponentsjs/webcomponents-lite.js”> </script> <link rel=“import” href=“bower_components/hoge-element/hoge-element.html”> </head> <body> <hoge-element></hoge-element> </body> </html> 使用するElementをbowerでインストール タグとして使用 Custom Elements, HTML ImportsのPolyfillをロード Elementをインポート 4
- 5. Element Catalog ✤ 公式が配布するPolymerElement集 ✤https://elements.polymer-project.org/ ✤ マテリアルデザイン、Google API、アニメーション、 EC用フォーム、オフライン… 5
- 6. サンプル <!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"> </script> <linkrel="import" href="bower_components/google-map/google-map.html"> <style> google-map { height: 600px; } </style> </head> <body> <google-map latitude="34.682933" longitude="135.506919" fit-to-markers> <google-map-marker latitude="34.682933" longitude="135.506919"> </google-map-marker> </google-map> </body> </html> index.html 6 google-mapをインポート Google Mapを表示 マーカーを作成
- 7.
- 8. PolymerElementを作る <link rel="import" href="bower_components/polymer/polymer.html"> <dom-moduleid="my-chart"> <link rel="stylesheet" href="bower_components/nvd3/build/nv.d3.css"> <style> .view { width: 600px; height: 600px; } </style> <template> <div class="view"><svg id="svg"></svg></div> </template> <script src="bower_components/d3/d3.js"></script> <script src="bower_components/nvd3/build/nv.d3.js"></script> <script src="my-chart.js"></script> </dom-module> my-chart.html 8 polymerをインポート 利用側に挿入されるHTML要素を定義 my-chart要素を定義
- 9. Polymer({ is: 'my-chart', ready: function() { nv.addGraph(() => { const chart = nv.models.discreteBarChart() .x((d) => d.label) .y((d) => d.value) .staggerLabels(true) .tooltips(false) .showValues(true); d3.select(this.$.svg) .datum(exampleData()) .call(chart); nv.utils.windowResize(chart.update); return chart; }); } }); my-chart.js 9 my-chartの振る舞いを定義 ライフサイクルメソッド
- 10. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src=“bower_components/webcomponentsjs/webcomponents-lite.js"> </script> <linkrel="import" href="my-chart.html"> </head> <body> <my-chart></my-chart> </body> </html> index.html 10
- 12. AngularJSから使う <!DOCTYPE html> <html> <head> <script src="bower_components/angular/angular.js"></script> <scriptsrc=“bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="my-chart.html"> </head> <body ng-app="app"> <div ng-controller="MainController"> <span>{{hoge}}</span> <my-chart></my-chart> </div> <script> angular.module('app', []) .controller('MainController', function ($scope) { $scope.hoge = 'hoge'; }); </script> </body> </html> index.html 12 テンプレートの中でそのまま使える！
- 13. まとめ ✤ Polymerで再利用性の高いコンポーネントを使う/作る ✤ サードパーティライブラリのラップもできる ✤AngularJSからも使える 13