![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)
More Related Content
What's hot (20)
Viewers also liked (9)
Similar to 础苍驳耻濒补谤闯厂で业务システム鲍滨部品化 (20)
![Visual Studio Online BUILD を本気で使いこなして品質＆効率を劇的に上げる！ [ Comm Tech Festival ] C-4](https://cdn.slidesharecdn.com/ss_thumbnails/commtechfestivalvso2015build-150926103603-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
More from Toshio Ehara (20)
![Cocos2d/2d-x/html5 [Objective-C/C++/JavaScript] 好みの言語はどれですか？](https://cdn.slidesharecdn.com/ss_thumbnails/ltcocos20130608obccppjs-130609185929-phpapp02-thumbnail.jpg?width=560&fit=bounds)
础苍驳耻濒补谤闯厂で业务システム鲍滨部品化
- 1. 础苍驳耻濒补谤闯厂で业务システム鲍滨部品化 Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com JavaQne(じゃばきゅん) 2015 Fukuoka (2015/01/24)
- 2. -自己紹介- 株式会社キャムの江原と申します。 Excelとかプログラムとか何かイロイロしてます。 twitter : @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
- 5. ①导入の狙い
- 6. 目的 - HTMLタグの記述で個人差を出さない - デザインを含むタグにしたい - 闯厂(ブラウザ)で顿翱惭を描画したい
- 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>? <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に依存しない構成も検討しています? (→???????????でなく乗り換え) ⑤まとめと今后について