Download as PDF, PPTX
![HTMLの要素や属性に機能を追加できます <table class="table table-striped">
<thead>
<tr>
<th>番号</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list">
<td>{{item.no}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table> ng-repeatは配列を繰り返す標準Directive var list = [
{no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"}
]; <tr ng-repeat="item in list">](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/75/AngularJS-UI-14-2048.jpg)
![例えばこんな感じで作成できます。 <ore-table data="list">
<column title="番号" name="no"></column>
<column title="名前" name="name"></column>
</ore-table> ore-tableという名前で Dirctiveにカスタムタグを登録 var list = [
{no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"}
]; var m = angular.module("directives");
m.directive("oreTable", ["$compile", function ($compile) {
return {
restrict: "E",](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/75/AngularJS-UI-18-2048.jpg)
![現在の形 <ore-grid data="vm" layout="gLayout"></ore-grid>
<script th:inline="javascript">
var globalLayout = /*[[${layout}]]*/ null;
</script>
Modelデータを指定 レイアウト定義を指定 Thymeleafで定義を埋め込み var model = { list: [
{no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"}
] };](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/75/AngularJS-UI-22-2048.jpg)
![<ore-grid data="vm" layout="gLayout"></ore-grid>
<script th:inline="javascript">
var globalLayout = /*[[${layout}]]*/ null;
</script>
var globalLayout = { 'gLayout':{ 'modelId':'list', 'row':{ 'columns':[ {'align':'right','name':'no','title':'u756Au53F7'}, {'align':'left','name':'name','title':'u540Du524D'} ] } } }; Thymeleafで定義を埋め込み サーバ側でレイアウト情報を生成します](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/75/AngularJS-UI-23-2048.jpg)
![出力結果 <ore-grid data="vm" layout="gLayout"></ore-grid>
<script th:inline="javascript">
var globalLayout = /*[[${layout}]]*/ null;
</script>
Modelデータを指定 レイアウト定義を指定 Thymeleafで定義を埋め込み](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/75/AngularJS-UI-24-2048.jpg)
AngularJSで業務システムUI部品化
- 1. AngularJSで業務システムUI部品化 Photo by Web制作向け無料写真素材／ぱくたそhttp://www.pakutaso.com JavaQne(じゃばきゅん) 2015 Fukuoka (2015/01/24)
- 2.
- 3.
- 4.
- 5.
- 6. 目的 - HTMLタグの記述で個人差を出さない - デザインを含むタグにしたい -JS(ブラウザ)でDOMを描画したい
- 7.
- 8.
- 9.
- 10. MV*フレームワーク ModelView var data ={ cd: 101, nm: "test" }; <div> {{data.cd}} {{data.nm}} </div> データバインディング 101 test JSのObjectが 自動表示されるよ
- 11. MV*フレームワーク ModelView <div> {{data.cd}} {{data.nm}} </div> データバインディング Modelが変わると Viewに反映するよ var data ={ cd: 102, nm: "test" }; 102 test
- 12.
- 13. DirectiveはHTMLを拡張する機能です <table class="table table-striped"> <thead> <tr> <th>番号</th> <th>名前</th> </tr> </thead> <tbody> <trng-repeat="item in list"> <td>{{item.no}}</td> <td>{{item.name}}</td> </tr> </tbody> </table> ng-repeatは配列を繰り返す標準Directive
- 14. HTMLの要素や属性に機能を追加できます <table class="table table-striped"> <thead> <tr> <th>番号</th> <th>名前</th> </tr> </thead> <tbody> <trng-repeat="item in list"> <td>{{item.no}}</td> <td>{{item.name}}</td> </tr> </tbody> </table> ng-repeatは配列を繰り返す標準Directive var list = [ {no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"} ]; <tr ng-repeat="item in list">
- 15. <table class="table table-striped"> <thead> <tr> <thclass="ore-no-style" >番号</th> <th>名前</th> </tr> </thead> <tbody> <tr ng-repeat="item in list"> <td>{{item.no}}</td> <td>{{item.name}}</td> </tr> </tbody> </table> でも標準のDirectiveだけでは デザインを統一するのが難しいです ( ふふふ、こっそりと 個別ﾃﾞｻﾞｲﾝにしちゃおう
- 16. <table class="table table-striped"> <thead> <tr> <thclass="ore-no-style" >番号</th> <th>名前</th> </tr> </thead> <tbody> <tr ng-repeat="item in list"> <td>{{item.no}}</td> <td>{{item.name}}</td> </tr> </tbody> </table> でも標準のDirective デザインを統一するのが難しいです ( ふふふ、こっそりと 個別ﾃﾞｻﾞｲﾝにしちゃおう
- 17.
- 18. 例えばこんな感じで作成できます。 <ore-table data="list"> <column title="番号"name="no"></column> <column title="名前" name="name"></column> </ore-table> ore-tableという名前で Dirctiveにカスタムタグを登録 var list = [ {no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"} ]; var m = angular.module("directives"); m.directive("oreTable", ["$compile", function ($compile) { return { restrict: "E",
- 19. 出力結果 <ore-table data="list"> <column title="番号"name="no"></column> <column title="名前" name="name"></column> </ore-table> ore-tableという名前で Dirctiveにカスタムタグを登録
- 20.
- 21.
- 22. 現在の形 <ore-grid data="vm" layout="gLayout"></ore-grid> <scriptth:inline="javascript"> var globalLayout = /*[[${layout}]]*/ null; </script> Modelデータを指定 レイアウト定義を指定 Thymeleafで定義を埋め込み var model = { list: [ {no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"} ] };
- 23. <ore-grid data="vm" layout="gLayout"></ore-grid> <scriptth:inline="javascript"> var globalLayout = /*[[${layout}]]*/ null; </script> var globalLayout = { 'gLayout':{ 'modelId':'list', 'row':{ 'columns':[ {'align':'right','name':'no','title':'u756Au53F7'}, {'align':'left','name':'name','title':'u540Du524D'} ] } } }; Thymeleafで定義を埋め込み サーバ側でレイアウト情報を生成します
- 24. 出力結果 <ore-grid data="vm" layout="gLayout"></ore-grid> <scriptth:inline="javascript"> var globalLayout = /*[[${layout}]]*/ null; </script> Modelデータを指定 レイアウト定義を指定 Thymeleafで定義を埋め込み
- 25.
- 26. - 品質を一定にする為 JavaScriptでDOMを描画する際に カスタムタグを使用しています - お客様毎の要望に応える為 レイアウト情報でテンプレートを生成してます -弊社でAngularJSで大きく依存しているのは カスタムタグ(Directive)のみ - AngularJSに依存しない構成も検討しています (→ﾊﾞｰｼﾞｮﾝｱｯﾌﾟでなく乗り換え) ⑤まとめと今後について
- 27.