AngularJSで業務システムUI部品化
3 likes4,155 views
2015/01/24 13:00 JavaQne(じゃばきゅん) 2015 Fukuoka
![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/85/AngularJS-UI-14-320.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/85/AngularJS-UI-18-320.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/85/AngularJS-UI-22-320.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/85/AngularJS-UI-23-320.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/85/AngularJS-UI-24-320.jpg)
AngularJSで業務システムUI部品化
- 1. AngularJSで業務システムUI部品化 Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com JavaQne(じゃばきゅん) 2015 Fukuoka (2015/01/24)
- 2. -自己紹介- 株式会社キャムの江原と申します。 Excelとかプログラムとか何かイロイロしてます。 twitter : @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
- 5. ①導入の狙い
- 6. 目的 - HTMLタグの記述で個人差を出さない - デザインを含むタグにしたい - JS(ブラウザ)でDOMを描画したい
- 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. ③Directiveについて
- 13. Directiveは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
- 14. 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">
- 15. <table class="table table-striped"> <thead> <tr> <th class="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> <th class="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 デザインを統一するのが難しいです ( ふふふ、こっそりと 個別ﾃﾞｻﾞｲﾝにしちゃおう
- 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にカスタムタグを登録
- 22. 現在の形 <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"} ] };
- 23. <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で定義を埋め込み サーバ側でレイアウト情報を生成します
- 24. 出力結果 <ore-grid data="vm" layout="gLayout"></ore-grid> <script th:inline="javascript"> var globalLayout = /*[[${layout}]]*/ null; </script> Modelデータを指定 レイアウト定義を指定 Thymeleafで定義を埋め込み
- 25. ⑤まとめと今後について
- 26. - 品質を一定にする為 JavaScriptでDOMを描画する際に カスタムタグを使用しています - お客様毎の要望に応える為 レイアウト情報でテンプレートを生成してます - 弊社でAngularJSで大きく依存しているのは カスタムタグ(Directive)のみ - AngularJSに依存しない構成も検討しています (→ﾊﾞｰｼﾞｮﾝｱｯﾌﾟでなく乗り換え) ⑤まとめと今後について