{"id":1,"date":"2015-02-20T22:22:33","date_gmt":"2015-02-20T22:22:33","guid":{"rendered":"http:\/\/dart.honobono-life.info\/?p=1"},"modified":"2017-09-29T22:27:49","modified_gmt":"2017-09-29T22:27:49","slug":"angulardart-demo","status":"publish","type":"post","link":"http:\/\/dart.honobono-life.info\/?p=1","title":{"rendered":"AngularDart Demo"},"content":{"rendered":"<ul>\r\n<li>AngularDart : 1.1.0<\/li>\r\n<li>Dart : 1.8.5<\/li>\r\n<li>Bootstrap : 3.2.0<\/li>\r\n<li>include file<\/li>\r\ndart.js\r\n<\/ul>\r\n<!--more-->\r\n <br \/>\r\n<strong>#INDEX<\/strong><br \/>\r\n<a href=\"#2way\">1. 2Way binding,ng-repeat,filter<\/a><br \/>\r\n<a href=\"#include\">2. ng-include, ng-switch<\/a><br \/>\r\n<a href=\"#ngif\">3. ng-if,ng-show,ng-hide<\/a><br \/>\r\n<a href=\"#ngclass\">4. ng-class,ng-style<\/a><br \/>\r\n<a href=\"#ngevent\">5. event<\/a><br \/>\r\n<a href=\"#ngcheck\">6. ng-disabled,ng-checked,ng-readonly,ng-select<\/a><br \/>\r\n<a href=\"#ngform\">7. form validation<\/a><br \/>\r\n<a href=\"#ngselect\">8. select,option,radio<\/a><br \/>\r\n<a href=\"#ngfmter\">9. Built-in formatter<\/a><br \/>\r\n<a href=\"#ngfmter1\">10. Built-in formatter by function<\/a><br \/>\r\n<a href=\"#ngfmter2\">11. Custom formatter<\/a><br \/>\r\n<a href=\"#ngfmter3\">12. Pagination<\/a><br \/>\r\n<a href=\"#ngservice\">13. Service<\/a><br \/>\r\n<a href=\"#nghttpjson\">14. Http service, Read from a JSON-encoded file<\/a><br \/>\r\n<a href=\"#nghttppost\">15. Http service, POST, Interceptor<\/a><br \/>\r\n<a href=\"#ngrest\">16. Router, RESTful<\/a><br \/>\r\n <br \/>\r\n<H3 id=\"2way\">1. 2Way binding,ng-repeat,filter<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<mvc-demo><\/mvc-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app todo-controller>\r\n    &lt;h2>Todo List&lt;\/h2>\r\n    &lt;ul>\r\n      &lt;li ng-repeat=\"todo in todos\">\r\n        &lt;span>{{todo.text}}&lt;\/span>\r\n      &lt;\/li>\r\n    &lt;\/ul>\r\n    &lt;h2>Todo Table&lt;\/h2>\r\n    Filter: &lt;input type=\"text\" ng-model=\"nameFilterString\">\r\n    &lt;table class=\"table\">\r\n      &lt;thead>\r\n        &lt;tr>&lt;th>No.&lt;\/th>&lt;th>Action&lt;\/th>&lt;th>Done&lt;\/th>&lt;\/tr>\r\n      &lt;\/thead>\r\n      &lt;tbody>\r\n        &lt;tr ng-repeat=\"todo in todos | filter:{text:nameFilterString} | orderBy: 'text'\" ng-class=\"$odd ? 'bg-success' : 'bg-warning'\">\r\n          &lt;td>{{$index + 1}}&lt;\/td>\r\n          &lt;td>{{todo.text}}&lt;\/td>\r\n          &lt;td>{{todo.done}}&lt;\/td>\r\n        &lt;\/tr>\r\n      &lt;\/tbody>\r\n    &lt;\/table>\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass TodoController {\r\n  List&lt;Todo> todos;\r\n  String nameFilterString = \"\";\r\n  \r\n  TodoController() {\r\n    todos = [\r\n      new Todo('learn AngularDart', false),\r\n      new Todo('build an AngularDart App', false),\r\n      new Todo('learn Dart', false),\r\n      new Todo('learn JavaScript', true),\r\n      new Todo('learn Google Maps', true),\r\n      new Todo('learn AngularJS', true)\r\n    ];\r\n  } \r\n}\r\n \r\nclass Todo {\r\n  String text;\r\n  bool done;\r\n \r\n  Todo(this.text, this.done);\r\n}\r\n \r\nclass TodoModule extends Module {\r\n  TodoModule() {\r\n    bind(TodoController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new TodoModule())\r\n    .rootContextType(TodoController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"include\">2. ng-include, ng-switch<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<include-demo><\/include-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app todo-controller>\r\n    <strong>ng-include(1)source is a string<\/strong>\r\n    &lt;div ng-include=\"view\/include_table.html\">&lt;\/div>\r\n    <strong>ng-include(2)source is a function<\/strong>\r\n    &lt;form>\r\n      &lt;input type=\"radio\" ng-model=\"includeFile\" value=\"list\">List\r\n      &lt;input type=\"radio\" ng-model=\"includeFile\" value=\"table\">Table\r\n    &lt;\/form>\r\n    &lt;div ng-include={{switchHtml()}}>&lt;\/div>\r\n    &lt;br \/>\r\n    <strong>ng-switch<\/strong>\r\n    &lt;form>\r\n      &lt;input type=\"radio\" ng-model=\"sw\" value=\"list\">List\r\n      &lt;input type=\"radio\" ng-model=\"sw\" value=\"table\">Table\r\n    &lt;\/form>\r\n    &lt;div ng-switch=\"sw\">\r\n      &lt;div ng-switch-when=\"table\">\r\n        &lt;table class=\"table\">\r\n          &lt;thead>\r\n            &lt;tr>&lt;th>No.&lt;\/th>&lt;th>Action&lt;\/th>&lt;th>Done&lt;\/th>&lt;\/tr>\r\n          &lt;\/thead>\r\n          &lt;tbody>\r\n            &lt;tr ng-repeat=\"todo in todos\" ng-class=\"$odd ? 'bg-success' : 'bg-wa\r\nrning'\">\r\n              &lt;td>{{$index + 1}}&lt;\/td>\r\n              &lt;td>{{todo.text}}&lt;\/td>\r\n              &lt;td>{{todo.done}}&lt;\/td>\r\n            &lt;\/tr>\r\n          &lt;\/tbody>\r\n        &lt;\/table>\r\n      &lt;\/div>\r\n      &lt;div ng-switch-when=\"list\">\r\n        &lt;ul>\r\n          &lt;li ng-repeat=\"todo in todos\">{{todo.text}} ({{todo.done}})&lt;\/li>\r\n        &lt;\/ul>\r\n      &lt;\/div>\r\n      &lt;div ng-switch-default>\r\n        Select above option to display a layout\r\n      &lt;\/div>\r\n    &lt;\/div>\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass TodoController {\r\n  List&lt;Todo> todos;\r\n  String includeFile = \"\";\r\n  \r\n  TodoController() {\r\n    todos = [\r\n      new Todo('learn AngularDart', false),\r\n      new Todo('build an AngularDart App', false),\r\n      new Todo('learn Dart', false),\r\n      new Todo('learn JavaScript', true),\r\n      new Todo('learn Google Maps', true),\r\n      new Todo('learn AngularJS', true)\r\n    ];\r\n  }\r\n  String switchHtml() {\r\n    if (includeFile == \"list\"){\r\n      return \"view\/include_list.html\";\r\n    } else if (includeFile == \"table\"){\r\n      return \"view\/include_table.html\";\r\n    }\r\n  }\r\n}\r\n \r\nclass Todo {\r\n  String text;\r\n  bool done;\r\n \r\n  Todo(this.text, this.done);\r\n}\r\n \r\nclass TodoModule extends Module {\r\n  TodoModule() {\r\n    bind(TodoController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new TodoModule())\r\n    .rootContextType(TodoController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,spec,temp\">\r\n<div ng-non-bindable><pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular:\r\n    html_files:\r\n    - web\/view\/include_table.html\r\n    - web\/view\/include_list.html\r\n\r\n(include_list.html)\r\n&lt;ul>\r\n  &lt;li ng-repeat=\"todo in todos\">{{todo.text}} ({{todo.done}})&lt;\/li>\r\n&lt;\/ul>\r\n\r\n(include_table.html)\r\n&lt;table class=\"table\">\r\n  &lt;thead>\r\n    &lt;tr>&lt;th>No.&lt;\/th>&lt;th>Action&lt;\/th>&lt;th>Done&lt;\/th>&lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"todo in todos\" ng-class=\"$odd ? 'bg-success' : 'bg-warning'\">\r\n      &lt;td>{{$index + 1}}&lt;\/td>\r\n      &lt;td>{{todo.text}}&lt;\/td>\r\n      &lt;td>{{todo.done}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n<\/pre><\/div>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngif\">3. ng-if,ng-show,ng-hide<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<show-demo><\/show-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n    &lt;strong>1.ng-if&lt;\/strong>\r\n    &lt;div class=\"checkbox\">\r\n      &lt;label>\r\n        &lt;input type=\"checkbox\" ng-model=\"detail\" \/>Detail\r\n      &lt;\/label>\r\n    &lt;\/div>\r\n    &lt;ul>\r\n      &lt;li ng-repeat=\"member in members\">{{member.name}}\r\n        &lt;div ng-if=\"detail\">\r\n          &lt;ul>\r\n            &lt;li>age\uff1a{{member.age}}&lt;\/li>\r\n            &lt;li>address\uff1a{{member.address}}&lt;\/li>\r\n          &lt;\/ul>\r\n        &lt;\/div>\r\n      &lt;\/li>\r\n    &lt;\/ul>\r\n    &lt;strong>2.ng-show&lt;\/strong>\r\n    &lt;style>\r\n      .detail > *:first-child {color: red}\r\n    &lt;\/style>\r\n    &lt;ul>\r\n      &lt;li ng-repeat=\"member in members\">{{member.name}}\r\n        &lt;ul class=\"detail\">\r\n          &lt;li ng-show=\"member.age_v\">age\uff1a{{member.age}}&lt;\/li>\r\n          &lt;li ng-show=\"member.address_v\">address\uff1a{{member.address}}&lt;\/li>\r\n        &lt;\/ul>\r\n      &lt;\/li>\r\n    &lt;\/ul>\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  List&lt;Member> members;\r\n  bool detail;\r\n  \r\n  MemberController() {\r\n    members = [\r\n      new Member('John',20,true,'1st Ave Seattle WA',false),\r\n      new Member('Jessie',55,false,'2nd Ave Seattle WA',true),\r\n      new Member('Peter',20,true,'Mercer St Seattle WA',true),\r\n      new Member('Erika',37,false,'Alaskan Way Seattle WA',false)\r\n    ];\r\n  }\r\n}\r\n \r\nclass Member {\r\n  String name;\r\n  int age;\r\n  bool age_v;\r\n  String address;\r\n  bool address_v;\r\n \r\n  Member(this.name,this.age,this.age_v,this.address,this.address_v);\r\n}\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngclass\">4. ng-class,ng-style<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<class-demo><\/class-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n<strong>1.ng-class,ng-style<\/strong>\r\n&lt;div class=\"checkbox\">\r\n  &lt;label>\r\n    &lt;input type=\"checkbox\" ng-model=\"danger\" \/>applay \"bg-warning\"class\r\n  &lt;\/label>\r\n&lt;\/div>\r\n&lt;ul ng-class=\"{'bg-warning': danger}\">\r\n  &lt;li ng-repeat=\"member in members\">{{member.name}}\r\n    &lt;ul>\r\n      &lt;li ng-style=\"{color:'red'}\">age\uff1a{{member.age}}&lt;\/li>\r\n      &lt;li ng-class=\"['bg-success','text-danger']\">address\uff1a{{member.address}}&lt;\/li>\r\n    &lt;\/ul>\r\n  &lt;\/li>\r\n&lt;\/ul>\r\n<strong>2.ng-class-even,ng-class-odd<\/strong>\r\n&lt;style>\r\n  tr.tbl-bg-clr-odd { background-color: lightpink; }\r\n  tr.tbl-bg-clr-even { background-color: lightgreen;}\r\n&lt;\/style>\r\n&lt;table class=\"table\">\r\n  &lt;thead>\r\n    &lt;tr>&lt;th>No.&lt;\/th>&lt;th>name&lt;\/th>&lt;th>age&lt;\/th>&lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"member in members\" ng-class-even=\"tblBgClr.even\" ng-class-odd=\"tblBgClr.odd\">\r\n      &lt;td>{{$index + 1}}&lt;\/td>\r\n      &lt;td>{{member.name}}&lt;\/td>\r\n      &lt;td>{{member.age}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  List&lt;Member> members;\r\n  bool danger;\r\n  Map tblBgClr;\r\n  \r\n  MemberController() {\r\n    members = [\r\n      new Member('John',20,true,'1st Ave Seattle WA',false),\r\n      new Member('Jessie',55,false,'2nd Ave Seattle WA',true),\r\n      new Member('Peter',20,true,'Mercer St Seattle WA',true),\r\n      new Member('Erika',37,false,'Alaskan Way Seattle WA',false)\r\n    ];\r\n    tblBgClr = {\r\n      \"odd\": \"tbl-bg-clr-odd\",\r\n      \"even\": \"tbl-bg-clr-even\"\r\n    };\r\n  }\r\n}\r\n \r\nclass Member {\r\n  String name;\r\n  int age;\r\n  bool age_v;\r\n  String address;\r\n  bool address_v;\r\n \r\n  Member(this.name,this.age,this.age_v,this.address,this.address_v);\r\n}\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngevent\">5. event<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<event-demo><\/event-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n  &lt;p>Click,mouseenter,mouseleave event demo&lt;\/p>\r\n  &lt;button class=\"btn\" ng-class=\"btnColor1\"\r\n          ng-click=\"btnColor1='btn-success'\"\r\n          ng-mouseenter=\"btnColor1='btn-primary'\"\r\n          ng-mouseleave=\"btnColor1='btn-defult'\"\r\n  >\r\n    Demo1\r\n  &lt;\/button>\r\n  &lt;button class=\"btn\" ng-class=\"btnColor2\"\r\n          ng-click=\"handleEvent($event)\"\r\n          ng-mouseenter=\"handleEvent($event)\"\r\n          ng-mouseleave=\"handleEvent($event)\"\r\n  >\r\n    Demo2\r\n  &lt;\/button>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  String btnColor1;\r\n  String btnColor2;\r\n  void handleEvent(e) {\r\n    switch (e.type){\r\n      case \"mouseover\":\r\n        btnColor2 = \"btn-primary\";\r\n        break;\r\n      case \"mouseenter\":\r\n        btnColor2 = \"btn-primary\";\r\n        break;\r\n      case \"click\":\r\n        btnColor2 = \"btn-success\";\r\n        break;\r\n      default:\r\n        btnColor2 = \"btn-default\";\r\n    }\r\n  }\r\n}\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngcheck\">6. ng-disabled,ng-checked,ng-readonly,ng-select<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<checked-demo><\/checked-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n&lt;input type=\"checkbox\" ng-model=\"checkValue\">Enable\/Disable&lt;br \/>\r\n1)ng-disabled&lt;br \/>\r\n  &lt;button class=\"btn btn-success\" ng-disabled=\"checkValue\">Button&lt;\/button>&lt;br \/>\r\n2)ng-checked&lt;br \/>\r\n  &lt;input type=\"checkbox\" ng-checked=\"checkValue\">Checbox&lt;br \/>\r\n3)ng-readonly&lt;br \/>\r\n  &lt;input type=\"text\" ng-readonly=\"checkValue\" value=\"ReadOnly\"\/>&lt;br \/>\r\n4)ng-selected&lt;br \/>\r\n  &lt;select>\r\n    &lt;option selected>Option1&lt;\/option>\r\n    &lt;option>Option2&lt;\/option>\r\n    &lt;option ng-selected=\"checkValue\">Selected&lt;\/option>\r\n  &lt;\/select>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  bool checkValue;\r\n}\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngform\">7. form validation<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<form-demo><\/form-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n&lt;style>\r\n  form.ng-invalid.ng-dirty { background-color: lightpink; }\r\n  form.ng-valid.ng-dirty { background-color: lightgreen; }\r\n  form { padding: 10px;}\r\n&lt;\/style>\r\n&lt;form name=\"appForm\" novalidate>\r\n  &lt;div class=\"well\">\r\n    &lt;div class=\"form-group\" ng-class=\"{'has-error': appForm['name'].invalid && appForm['name'].dirty}\">\r\n      &lt;label>Member ID&lt;\/label>\r\n      &lt;input type=\"text\" name=\"name\" class=\"form-control\"\r\n         ng-model=\"user.name\" required\r\n         ng-minlength=\"5\" ng-maxlength=\"10\"\r\n         pattern=\"^[A-Z0-9]+$\" \/>\r\n      &lt;span class=\"text-danger\" ng-show=\"appForm['name'].dirty && appForm['name'].hasErrorState('ng-required')\">This is a required field&lt;br \/>&lt;\/span>\r\n      &lt;span class=\"text-danger\" ng-show=\"appForm['name'].dirty && appForm['name'].hasErrorState('ng-minlength')\">Minimum length required is 5&lt;br \/>&lt;\/span>\r\n      &lt;span class=\"text-danger\" ng-show=\"appForm['name'].dirty && appForm['name'].hasErrorState('ng-maxlength')\">Max length required is 10&lt;br \/>&lt;\/span>\r\n      &lt;span class=\"text-danger\" ng-show=\"appForm['name'].dirty && appForm['name'].hasErrorState('ng-pattern')\">Only uppercase letter,digit&lt;br \/>&lt;\/span>\r\n    &lt;\/div>\r\n\r\n    &lt;div class=\"form-group\" ng-class=\"{'has-error': appForm['email'].invalid && appForm['email'].dirty}\">\r\n      &lt;label>Email&lt;\/label>\r\n      &lt;input type=\"email\" name=\"email\" class=\"form-control\"\r\n        ng-model=\"user.email\" required \/>\r\n      &lt;span class=\"text-danger\" ng-show=\"appForm['email'].dirty && appForm['email'].hasErrorState('ng-required')\">This is a required field&lt;br \/>&lt;\/span>\r\n      &lt;span class=\"text-danger\" ng-show=\"appForm['email'].dirty && appForm['email'].hasErrorState('ng-email')\">Enter a valid email address&lt;br \/>&lt;\/span>\r\n    &lt;\/div>\r\n    &lt;div class=\"text-center\">\r\n      &lt;button ng-disabled=\"appForm.invalid\" ng-click=\"save()\" class=\"btn btn-primary\">Submit\r\n      &lt;\/button>\r\n    &lt;\/div>\r\n  &lt;\/div>\r\n&lt;\/form>\r\n&lt;div class=\"well\" ng-show=\"result\">\r\n  &lt;strong>Check&lt;\/strong>&lt;br \/>\r\n  {{master|json}}\r\n&lt;\/div>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  Map user;\r\n  Map master;\r\n  bool result = false;\r\n  NgForm appForm;\r\n  void save() {\r\n    result = true;\r\n    master = user; \r\n  }\r\n}\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n\r\n<br \/>\r\n<H3 id=\"ngselect\">8. select,option,radio<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<select-demo><\/select-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n&lt;select ng-model=\"selectProduct1\" placeholder=\"Select a Product\">\r\n  &lt;option value=\"\">Select a Product&lt;\/option>\r\n  &lt;option ng-repeat=\"product in products\" ng-value=\"product.id\">{{product.name}}&lt;\/option>\r\n&lt;\/select>&lt;br \/>\r\nSelected value:{{selectProduct1}}&lt;br \/>\r\n&lt;br \/>\r\n&lt;div class=\"radio\" ng-repeat=\"product in products\">\r\n  &lt;label>\r\n    &lt;input type=\"radio\" ng-model=\"selectProduct2\"\r\n           value=\"{{product.id}}\">{{product.name}}\r\n  &lt;\/label>\r\n&lt;\/div>&lt;br \/>\r\nSelected value:{{selectProduct2}}&lt;br \/>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  List&lt;Product> products;\r\n  String selectProduct1;\r\n  String selectProduct2;\r\n  String selectProduct3;\r\n\r\n  MemberController() {\r\n    products = [\r\n      new Product('0101', 'product1','Group-A'),\r\n      new Product('0102', 'product2','Group-A'),\r\n      new Product('0103', 'product3','Group-A'),\r\n      new Product('0201', 'product4','Group-B'),\r\n      new Product('0202', 'product5','Group-B')\r\n    ];\r\n  }\r\n}\r\nclass Product {\r\n  String id;\r\n  String name;\r\n  String grp;\r\n \r\n  Product(this.id, this.name, this.grp);\r\n}\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngfmter\">9. Built-in formatter<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<formatter-demo><\/formatter-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n<strong>orderBy,limitTo,number<\/strong>&lt;br \/>\r\n&lt;table class=\"table\">\r\n  &lt;thead>\r\n    &lt;tr>&lt;th>Date&lt;\/th>&lt;th>Test#1&lt;\/th>&lt;th>Test#2&lt;\/th>&lt;th>Test#3&lt;\/th>&lt;th>Avarage&lt;\/th>&lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"score in scores | orderBy: '-date' |limitTo:3\">\r\n      &lt;td>{{score.date}}&lt;\/td>\r\n      &lt;td>{{score.test1}}&lt;\/td>\r\n      &lt;td>{{score.test2}}&lt;\/td>\r\n      &lt;td>{{score.test3}}&lt;\/td>\r\n      &lt;td>{{(score.test1 + score.test2 + score.test3)\/3 | number:1}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n\r\n<strong>Filter(map),orderBy(list),<\/strong>&lt;br \/>\r\nFilter: &lt;input type=\"text\" ng-model=\"nameFilterString\">\r\n&lt;table class=\"table\">\r\n  &lt;thead>\r\n    &lt;tr>&lt;th>Name&lt;\/th>&lt;th>Category&lt;\/th>&lt;th>Price&lt;\/th>&lt;th>Check&lt;\/th>&lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"item in products |filter:{name: nameFilterString, chk: true} | orderBy:['category','price']\">\r\n      &lt;td>{{item.name}}&lt;\/td>\r\n      &lt;td>{{item.category}}&lt;\/td>\r\n      &lt;td>{{item.price | currency}}&lt;\/td>\r\n      &lt;td>{{item.chk}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  \r\n  List&lt;Score> scores;\r\n  List&lt;Product> products;\r\n  String nameFilterString = \"\";\r\n    \r\n  MemberController() {\r\n    scores = [\r\n      new Score('2014\/01\/08', 74, 52, 68),\r\n      new Score('2014\/03\/13', 54, 63, 38),\r\n      new Score('2014\/04\/03', 36, 91, 75),\r\n      new Score('2014\/02\/11', 71, 52, 48),\r\n      new Score('2014\/11\/22', 48, 57, 28),\r\n      new Score('2014\/05\/03', 94, 52, 78)\r\n    ];\r\n    products = [\r\n      new Product('DeskTop #1', \"DeskTop\", 850, true),\r\n      new Product('DeskTop #4', \"DeskTop\", 350, false),\r\n      new Product('Laptop #2', \"Laptop\", 1590, true),\r\n      new Product('DeskTop #2', \"DeskTop\", 980, true),\r\n      new Product('Laptop #4', \"Laptop\", 590, false),\r\n      new Product('Laptop #3', \"Laptop\", 2590, true),\r\n      new Product('Laptop #1', \"Laptop\", 1490, true)\r\n    ];\r\n  } \r\n}\r\nclass Score {\r\n  String date;\r\n  int test1;\r\n  int test2;\r\n  int test3;\r\n \r\n  Score(this.date, this.test1, this.test2, this.test3);\r\n}\r\n\r\nclass Product {\r\n  String name;\r\n  String category;\r\n  int price;\r\n  bool chk;\r\n \r\n  Product(this.name, this.category, this.price, this.chk);\r\n}\r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngfmter1\">10. Built-in formatter by function<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<formatter1-demo><\/formatter1-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n<strong>1.filter by function<\/strong>&lt;br \/>\r\n\r\n&lt;table class=\"table\">\r\n  &lt;thead>\r\n    &lt;tr>&lt;th>Date&lt;\/th>&lt;th>Test#1&lt;\/th>&lt;th>Test#2&lt;\/th>&lt;th>Test#3&lt;\/th>&lt;th>Avarage&lt;\/th>&lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"score in scores | filter:selectPass\">\r\n      &lt;td>{{score.date}}&lt;\/td>\r\n      &lt;td>{{score.test1}}&lt;\/td>\r\n      &lt;td>{{score.test2}}&lt;\/td>\r\n      &lt;td>{{score.test3}}&lt;\/td>\r\n      &lt;td>{{(score.test1 + score.test2 + score.test3)\/3 | number:1}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n  &lt;br \/>\r\n<strong>2.orderBy expression<\/strong>&lt;br \/>\r\n\u3000\r\n[ &lt;a href=\"\" ng-click=\"sortClm='date'; reverse=false\">back to init&lt;\/a> ]\r\n&lt;table class=\"table\">\r\n  &lt;thead>\r\n    &lt;tr>\r\n      &lt;th>&lt;a href=\"\" ng-click=\"sortClm = 'date'; reverse=!reverse\">Date&lt;\/a>&lt;\/th>\r\n      &lt;th>&lt;a href=\"\" ng-click=\"sortClm = 'test1'; reverse=!reverse\">Test#1&lt;\/a>&lt;\/th>\r\n      &lt;th>&lt;a href=\"\" ng-click=\"sortClm = 'test2'; reverse=!reverse\">Test#2&lt;\/a>&lt;\/th>\r\n      &lt;th>&lt;a href=\"\" ng-click=\"sortClm = 'test3'; reverse=!reverse\">Test#3&lt;\/a>&lt;\/th>\r\n      &lt;th>Total&lt;\/th>\r\n    &lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"score in scores | orderBy:sortClm:reverse\">\r\n      &lt;td>{{score.date}}&lt;\/td>\r\n      &lt;td>{{score.test1}}&lt;\/td>\r\n      &lt;td>{{score.test2}}&lt;\/td>\r\n      &lt;td>{{score.test3}}&lt;\/td>\r\n      &lt;td>{{score.test1 + score.test2 + score.test3}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n  &lt;br \/>\r\n<strong>3.orderBy function<\/strong><br \/>\r\n\u3000\r\n&lt;table class=\"table\">\r\n  &lt;thead>\r\n    &lt;tr>&lt;th>Name&lt;\/th>&lt;th>Price&lt;\/th>&lt;th>Stock&lt;\/th>&lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"item in products | orderBy:customOrder\">\r\n      &lt;td>{{item.name}}&lt;\/td>\r\n      &lt;td>{{item.price | currency}}&lt;\/td>\r\n      &lt;td>{{item.stock}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  List&lt;Score> scores;\r\n  List&lt;Product> products;\r\n  String sortClm = 'date';\r\n  bool reverse = false;\r\n  \r\n  MemberController() {\r\n    scores = [\r\n      new Score('2014\/01\/08', 74, 52, 68),\r\n      new Score('2014\/03\/13', 54, 63, 38),\r\n      new Score('2014\/04\/03', 36, 91, 75),\r\n      new Score('2014\/02\/11', 71, 52, 48),\r\n      new Score('2014\/11\/22', 48, 57, 28),\r\n      new Score('2014\/05\/03', 94, 52, 78)\r\n    ];\r\n    products = [\r\n      new Product('DeskTop #1', 850, 3),\r\n      new Product('DeskTop #4', 350, 0),\r\n      new Product('Laptop #2', 1590, 6),\r\n      new Product('DeskTop #2', 980, 3),\r\n      new Product('Laptop #4', 590, 0),\r\n      new Product('Laptop #3', 2590, 1),\r\n      new Product('Laptop #1', 1490, 10)\r\n    ];\r\n  }\r\n  bool selectPass(item) {\r\n    if ((item.test1 + item.test2 + item.test3) > 180 ) {\r\n      return true;\r\n    }\r\n  }\r\n  int customOrder(item) {\r\n    return item.stock == 0 ? 99999 : item.price;\r\n  }\r\n}\r\nclass Score {\r\n  String date;\r\n  int test1;\r\n  int test2;\r\n  int test3;\r\n \r\n  Score(this.date, this.test1, this.test2, this.test3);\r\n}\r\n\r\nclass Product {\r\n  String name;\r\n  int price;\r\n  int stock;\r\n \r\n  Product(this.name, this.price, this.stock);\r\n}\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n  }\r\n}\r\n \r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngfmter2\">11. Custom formatter<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<formatter2-demo><\/formatter2-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n&lt;table class=\"table\">\r\n  &lt;thead>\r\n    &lt;tr>&lt;th>Name&lt;\/th>&lt;th>Group&lt;\/th>&lt;th>Price&lt;\/th>&lt;th>Check&lt;\/th>&lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"item in products\">\r\n      &lt;td>{{item.id}}&lt;\/td>\r\n      &lt;td>{{item.name}}&lt;\/td>\r\n      &lt;td>{{item.grp}}&lt;\/td>\r\n      &lt;td>{{item.chk | checkmarkfilter}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n\r\n&lt;select ng-model=\"selectProduct\" placeholder=\"Select a Group\">\r\n  &lt;option value=\"\">Select a Group&lt;\/option>\r\n  &lt;option ng-repeat=\"product in products | distinctfilter:'grp'\" ng-value=\"product.grp\">{{product.grp}}&lt;\/option>\r\n&lt;\/select>&lt;br \/>\r\nSelected value:{{selectProduct}}&lt;br \/>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\n(main.dart)\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\nimport 'package:WpDartExample\/formatter\/checkmark_filter.dart';\r\nimport 'package:WpDartExample\/formatter\/distinct_filter.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  String selectProduct;\r\n  List products = [\r\n    {'id': '0101', 'name': 'product1', 'grp': 'Group-A', \"chk\": true},\r\n    {'id': '0102', 'name': 'product2', 'grp': 'Group-A', \"chk\": true},\r\n    {'id': '0103', 'name': 'product3', 'grp': 'Group-A', \"chk\": false},\r\n    {'id': '0201', 'name': 'product4', 'grp': 'Group-B', \"chk\": true},\r\n    {'id': '0202', 'name': 'product5', 'grp': 'Group-B', \"chk\": false}\r\n  ];\r\n  MemberController() {\r\n  }\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n    bind(CheckmarkFilter);\r\n    bind(DistinctFilter);\r\n  }\r\n}\r\n\r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n\r\n(checkmark_filter.dart)\r\nlibrary WpDartExample.checkmark_filter;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\n@Formatter(name: 'checkmarkfilter')\r\nclass CheckmarkFilter {\r\n  String call(input) {\r\n    return input ? '\\u2713' : '';\r\n  }\r\n}\r\n\r\n(distinct_filter.dart)\r\nlibrary WpDartExample.distinct_filter;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\n@Formatter(name: 'distinctfilter')\r\nclass DistinctFilter {\r\n  List call(data, keyName) {\r\n    if (data is Iterable && keyName is String) {\r\n      List results = new List();\r\n      Map keys = new Map();\r\n      for (var i = 0; i < data.length; i++) {\r\n        var val = data[i][keyName];\r\n        if (keys[val] == null) {\r\n          keys[val] = true;\r\n          results.add(data[i]);\r\n        }\r\n      }\r\n      return results;\r\n    }\r\n    return const [];\r\n  }\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngfmter3\">12. Pagination<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<formatter3-demo><\/formatter3-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;title>AngularDart Sample&lt;\/title>\r\n    &lt;script type=\"application\/dart\" src=\"main.dart\">&lt;\/script>\r\n    &lt;script type=\"text\/javascript\" src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n\r\n    &lt;script src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div ng-cloak ng-app member-controller>\r\n\r\n&lt;form class=\"form-inline\">\r\n  &lt;div class=\"form-group\">\r\n    &lt;label>Page Size:&lt;\/label>\r\n    &lt;input ng-model=\"itemsPerPage\" type=\"number\"\">\r\n  &lt;\/div>\r\n&lt;\/form>\r\n&lt;table class=\"table table-striped\">\r\n  &lt;thead>\r\n    &lt;tr>\r\n      &lt;th>ID&lt;\/th>&lt;th>Name&lt;\/th>&lt;th>Group&lt;\/th>&lt;th>Check&lt;\/th>\r\n    &lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"item in products | offsetfilter: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage\">\r\n      &lt;td>{{item.id}}&lt;\/td>\r\n      &lt;td>{{item.name}}&lt;\/td>\r\n      &lt;td>{{item.grp}}&lt;\/td>\r\n      &lt;td>{{item.chk}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n  &lt;tfoot>\r\n    &lt;td colspan=\"4\">\r\n      &lt;ul class=\"pagination\">\r\n        &lt;li ng-class=\"prevPageDisabled()\">\r\n          &lt;a href=\"#\" ng-click=\"prevPage()\">&lt;&lt; Prev&lt;\/a>\r\n        &lt;\/li>\r\n        &lt;li ng-repeat=\"n in range()\"  ng-class=\"{active: n == currentPage}\" ng-click=\"setPage(n)\">\r\n          &lt;a href=\"#\">{{n}}&lt;\/a>\r\n        &lt;\/li>\r\n        &lt;li ng-class=\"nextPageDisabled()\">\r\n          &lt;a href=\"#\" ng-click=\"nextPage()\">Next >>&lt;\/a>\r\n        &lt;\/li>\r\n      &lt;\/ul>\r\n    &lt;\/td>\r\n  &lt;\/tfoot>\r\n&lt;\/table>\r\n\r\n  &lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\n(main.dart)\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\nimport 'package:WpDartExample\/formatter\/checkmark_filter.dart';\r\nimport 'package:WpDartExample\/formatter\/distinct_filter.dart';\r\n\r\n@Injectable()\r\nclass MemberController {\r\n  int maxPage;\r\n  int itemsPerPage = 3;\r\n  int currentPage = 1;\r\n  var pageRange = new List();\r\n  List products = [\r\n    {'id': '0101', 'name': 'product1', 'grp': 'Group-A', \"chk\": true},\r\n    {'id': '0102', 'name': 'product2', 'grp': 'Group-A', \"chk\": true},\r\n      :\r\n  ];\r\n  \r\n  List range() {\r\n    maxPage = (products.length\/itemsPerPage).ceil();\r\n    pageRange.clear();\r\n    for (var i = 1; i <= maxPage; i++) {\r\n      pageRange.add(i);\r\n    }\r\n    return pageRange;\r\n  }\r\n\r\n  void setPage(n) {\r\n    currentPage = n;\r\n  }\r\n  \r\n  void prevPage() {\r\n    if (currentPage > 1) {\r\n      currentPage--;\r\n    }\r\n  }\r\n  \r\n  void nextPage() {\r\n    if (currentPage < maxPage) {\r\n      currentPage++;\r\n    }\r\n  }\r\n  \r\n  String prevPageDisabled() {\r\n    return currentPage == 1 ? \"disabled\" : \"\";\r\n  }\r\n\r\n  String nextPageDisabled() {\r\n    return currentPage == maxPage ? \"disabled\" : \"\";\r\n  }\r\n  MemberController() {\r\n  }\r\n \r\nclass MemberModule extends Module {\r\n  MemberModule() {\r\n    bind(MemberController);\r\n    bind(CheckmarkFilter);\r\n    bind(DistinctFilter);\r\n  }\r\n}\r\n\r\nmain() {\r\n  applicationFactory()\r\n    .addModule(new MemberModule())\r\n    .rootContextType(MemberController)\r\n    .run();\r\n}\r\n\r\n(offset_filter.dart)\r\nlibrary WpDartExample.offset_filter;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\n@Formatter(name: 'offsetfilter')\r\nclass OffsetFilter {\r\n  List call(data, start) {\r\n    if (data is Iterable &#038;&#038; start is int) {\r\n      return data.sublist(start);\r\n    }\r\n    return const [];\r\n  }\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n\r\n<br \/>\r\n<H3 id=\"ngservice\">13. Service<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<main-demo><\/main-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n(main_demo.html)\r\n&lt;button ng-click=\"open('Component-A')\">Component-A&lt;\/button>\r\n&lt;button ng-click=\"open('Component-B')\">Component-B&lt;\/button>\r\n&lt;div ng-switch=\"tab\">\r\n  &lt;div ng-switch-when=\"Component-A\">\r\n    &lt;strong>Component-A&lt;\/strong>\r\n    &lt;log-demo msg=\"'This is Componetnt-A'\">&lt;\/log-demo>\r\n  &lt;\/div>\r\n  &lt;div ng-switch-when=\"Component-B\">\r\n    &lt;strong>Component-B&lt;\/strong>\r\n    &lt;log-demo msg=\"'This is Componetnt-B'\">&lt;\/log-demo>\r\n  &lt;\/div>\r\n&lt;\/div>\r\n\r\n(log_demo.html)\r\n&lt;ul>\r\n  &lt;li ng-repeat=\"item in logs\">\r\n    {{item.id}}=>{{item.msg}}\r\n  &lt;\/li>\r\n&lt;\/ul>\r\n&lt;button ng-click=\"add_s()\">Write a log&lt;\/button>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\n(main.dart)\r\nlibrary WpDartExample;\r\nimport 'dart:html';\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\nimport 'package:WpDartExample\/services\/log_service.dart';\r\nimport 'package:WpDartExample\/component\/main_demo.dart';\r\nimport 'package:WpDartExample\/component\/log_demo.dart';\r\n\r\nclass MyAppModule extends Module {\r\n  MyAppModule() {\r\n    bind(LogService);\r\n    bind(MainDemoComponent);\r\n    bind(LogDemoComponent);\r\n  }\r\n}\r\nvoid main() {\r\n  applicationFactory()\r\n      .addModule(new MyAppModule())\r\n      .run();\r\n}\r\n\r\n(log_service.dart)\r\nlibrary WpDartExample.log_service;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\n@Injectable()\r\nclass LogService {\r\n  List&lt;Map> logs;\r\n  int LogCount;\r\n  LogService() {\r\n    logs = new List();\r\n    LogCount = 0;\r\n  } \r\n  List add(msg) {\r\n    Map log = new Map();\r\n    log[\"id\"] = ++LogCount;\r\n    log[\"msg\"] = msg;\r\n    logs.add(log);\r\n    return logs;\r\n  }\r\n}\r\n\r\n(main_demo.dart)\r\nlibrary WpDartExample.main;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\n@Component(\r\n  selector: 'main-demo',\r\n  templateUrl: 'main_demo.html',\r\n  useShadowDom: false)\r\nclass MainDemoComponent {\r\n  String tab = \"Component-A\";\r\n  void open(input) {\r\n    tab = input;\r\n  }\r\n}\r\n\r\n(log_demo.dart)\r\nlibrary WpDartExample.log;\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:WpDartExample\/services\/log_service.dart';\r\n\r\n@Component(\r\n  selector: 'log-demo',\r\n  templateUrl: 'log_demo.html',\r\n  useShadowDom: false)\r\n  class LogDemoComponent {\r\n  @NgTwoWay('msg')\r\n  String msg;\r\n\r\n  LogService ls;\r\n  List&lt;Map> logs = new List();\r\n    \r\n  LogDemoComponent(this.ls) {\r\n  }\r\n\r\n  void add_s() {\r\n    logs = ls.add(msg);\r\n  }\r\n}\r\n\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.8 <0.7.0'\r\ntransformers:\r\n- angular:\r\n    html_files:\r\n      - lib\/component\/main_demo.html\r\n      - lib\/component\/log_demo.html\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"nghttpjson\">14. Http service, Read from a JSON-encoded file<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<httpjson-demo><\/httpjson-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n(httpjson_demo.html)\r\n&lt;button ng-click=\"getFriends(true)\">Success&lt;\/button>\r\n &lt;button ng-click=\"getFriends(false)\">Error&lt;\/button>&lt;br \/>\r\n&lt;strong>Response Status,Header&lt;\/strong>&lt;br \/>\r\n&lt;textarea class=\"form-control\" rows=\"5\">{{getFriendsResult}}&lt;\/textarea>\r\n&lt;strong>Response Data&lt;\/strong>&lt;br \/>\r\n    &lt;table class=\"table table-striped\">\r\n  &lt;thead>\r\n    &lt;tr>\r\n      &lt;th>No&lt;\/th>&lt;th>Name&lt;\/th>&lt;th>Age&lt;\/th>&lt;th>Address&lt;\/th>\r\n    &lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"item in friends\" >\r\n      &lt;td>{{item.id}}&lt;\/td>&lt;td>{{item.name}}&lt;\/td>&lt;td>{{item.age}}&lt;\/td>&lt;td>{{item.address}}&lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\n(main.dart)\r\nlibrary WpDartExample;\r\nimport 'dart:html';\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\nimport 'package:WpDartExample\/services\/httpjson_demo.dart';\r\n\r\nclass MyAppModule extends Module {\r\n  MyAppModule() {\r\n    bind(HttpjsonDemoComponent);\r\n  }\r\n}\r\nvoid main() {\r\n  applicationFactory()\r\n      .addModule(new MyAppModule())\r\n      .run();\r\n}\r\n\r\n(httpjson_demo.dart)\r\nlibrary WpDartExample.httpjson;\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'dart:async' show Future;\r\n\r\n@Component(\r\n  selector: 'httpjson-demo',\r\n  templateUrl: 'httpjson_demo.html',\r\n  useShadowDom: false)\r\nclass HttpjsonDemoComponent {\r\n  final Http _http;\r\n  List&lt;Map> friends = [];\r\n  String svrURL;\r\n  String getFriendsResult;\r\n  HttpjsonDemoComponent(this._http) {\r\n  }\r\n  \r\n  Future getFriends(bool tf) {\r\n    svrURL = tf ? \"friends.json\" : \"invalid-url\";\r\n    return _http.get(svrURL)\r\n              .then((HttpResponse response) {\r\n                friends = response.data;\r\n                getFriendsResult = \"status: \" + response.status.toString() + \"\\n\" +\r\n                                   \"headers: \" + response.config.headers.toString();\r\n              })\r\n              .catchError((e) {\r\n                friends = [];\r\n                getFriendsResult = \"status: \" + e.status.toString() + \"\\n\" +\r\n                                   \"contents: \" + e.data;\r\n              });\r\n  }\r\n}\r\n\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.8 <0.7.0'\r\ntransformers:\r\n- angular:\r\n    html_files:\r\n      - lib\/component\/httpjson_demo.html\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"nghttppost\">15. Http service, POST, Interceptor<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<httppost-demo><\/httppost-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n(httppost_demo.html)\r\n&lt;span>Sending Data&lt;\/span>&lt;br \/>\r\n&lt;span>{{send_data}}&lt;\/span>&lt;br \/>\r\n&lt;strong>1.AngularJS Default(json)&lt;\/strong>&lt;br \/>\r\n&lt;button ng-click=\"postCall(false)\">Send&lt;\/button>&lt;br \/>\r\n&lt;strong>2.Using Interceptor(x-www-form-urlencoded)&lt;\/strong>&lt;br \/>\r\n&lt;button ng-click=\"postCall(true)\">Send&lt;\/button>&lt;br \/>\r\n&lt;textarea class=\"form-control\" rows=\"3\">{{postCallResult}}&lt;\/textarea>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\n(main.dart)\r\nlibrary WpDartExample;\r\nimport 'dart:html';\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\nimport 'package:WpDartExample\/services\/httppost_demo.dart';\r\n\r\nclass MyAppModule extends Module {\r\n  MyAppModule() {\r\n    bind(HttppostDemoComponent);\r\n  }\r\n}\r\nvoid main() {\r\n  applicationFactory()\r\n      .addModule(new MyAppModule())\r\n      .run();\r\n}\r\n\r\n(httppost_demo.dart)\r\nlibrary WpDartExample.httppost;\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'dart:async' show Future;\r\n\r\n@Component(\r\n  selector: 'httppost-demo',\r\n  templateUrl: 'httppost_demo.html',\r\n\/\/  exportExpressions: const ['friends'],\r\n  useShadowDom: false)\r\nclass HttppostDemoComponent {\r\n  final Http _http;\r\n  Map send_data = {\r\n                    \"id\": \"0101\",\r\n                    \"name\": \"Tom\"\r\n                  };\r\n  String svrURL = \"http_server.php\";\r\n  String postCallResult;\r\n  Map headers = { 'Content-Type': 'application\/x-www-form-urlencoded' };\r\n  HttpInterceptor intercept;\r\n  HttpResponseConfig transRequest(HttpResponseConfig config) {\r\n    String transStr = \"\";\r\n    if (config.data != null) {\r\n      config.data.forEach((k, v) {\r\n        if (transStr.isNotEmpty) {\r\n          transStr += '&' + k + '=' + v;\r\n        } else {\r\n          transStr = k + '=' + v;\r\n        }\r\n      });\r\n    }\r\n    config.data = transStr;\r\n    return config;\r\n  }\r\n\r\n  HttppostDemoComponent(this._http) {\r\n    RequestInterceptor reqint = transRequest;\r\n    intercept = new HttpInterceptor();\r\n    intercept.request = reqint;\r\n  }\r\n  \r\n  Future postCall(bool tf) {\r\n    if(!tf) {\r\n      return _http.post(svrURL,send_data)\r\n                .then((HttpResponse response) {\r\n                  postCallResult = \"status: \" + response.status.toString() + \"\\n\" +\r\n                                     \"Sending Data: \" + response.data + \"\\n\" +\r\n                                     \"headers: \" + response.config.headers.toString();\r\n                })\r\n                .catchError((e) {\r\n                  postCallResult = \"status: \" + e.status.toString() + \"\\n\" +\r\n                                     \"contents: \" + e.data;\r\n                });\r\n    } else {\r\n      return _http.post(svrURL,send_data,headers:headers,interceptors:intercept)\r\n                .then((HttpResponse response) {\r\n                  postCallResult = \"status: \" + response.status.toString() + \"\\n\" +\r\n                                     \"Sending Data: \" + response.data + \"\\n\" +\r\n                                     \"headers: \" + response.config.headers.toString();\r\n                })\r\n                .catchError((e) {\r\n                  postCallResult = \"status: \" + e.status.toString() + \"\\n\" +\r\n                                     \"contents: \" + e.data;\r\n                });\r\n    };\r\n  }\r\n}\r\n\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.8 <0.7.0'\r\ntransformers:\r\n- angular:\r\n    html_files:\r\n      - lib\/component\/httppost_demo.html\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<br \/>\r\n<H3 id=\"ngrest\">16. Router, RESTful<\/H3><br \/>\r\n<br \/>\r\n<tabset justified=\"true\" >\r\n<tab heading=\"demo\">\r\n<users-demo><\/users-demo>\r\n<\/tab>\r\n<tab heading=\"markup\">\r\n<div ng-non-bindable><pre>\r\n\r\n<strong>(users_demo.html)<\/strong>\r\n&lt;a class=\"btn btn-primary\" href=\"#\/users\/main\" role=\"button\">To REST APP&lt;\/a>&lt;br \/>\r\n&lt;ng-view>&lt;\/ng-view>&lt;br \/>\r\n\r\n(view\/user_main.html)\r\n&lt;a class=\"btn btn-primary\" href=\"#\/users\/new\">User Create&lt;\/a>\r\n&lt;a class=\"btn btn-primary\" href=\"#\/users\">User Index&lt;\/a>\r\n\r\n<strong>(component\/user_index.html)<\/strong>\r\n&lt;table class=\"table table-striped table-bordered\">\r\n  &lt;thead>\r\n    &lt;tr>&lt;th>ID&lt;\/th>&lt;th>First Name&lt;\/th>&lt;th>Last name&lt;\/th>&lt;th>&lt;\/th>&lt;\/tr>\r\n  &lt;\/thead>\r\n  &lt;tbody>\r\n    &lt;tr ng-repeat=\"item in users\">\r\n      &lt;td>{{item.id}}&lt;\/td>\r\n      &lt;td>{{item.firstName}}&lt;\/td>\r\n      &lt;td>{{item.lastName}}&lt;\/td>\r\n      &lt;td>\r\n        &lt;a class=\"btn btn-primary\" href=\"#\/users\/{{item.id}}\" role=\"button\">Detail&lt;\/a>\r\n        &lt;button class=\"btn btn-primary\" ng-click=\"destroy(item.id)\">Delete&lt;\/button>\r\n      &lt;\/td>\r\n    &lt;\/tr>\r\n  &lt;\/tbody>\r\n&lt;\/table>\r\n&lt;strong>Reuslt&lt;\/strong>&lt;br \/>\r\n&lt;span>{{Result}}&lt;\/span>&lt;br \/>\r\n&lt;a class=\"btn btn-primary\" href=\"#\/users\/main\" role=\"button\">Back&lt;\/a>\r\n\r\n<strong>(component\/user_show.html)<\/strong>\r\n&lt;div class=\"panel panel-default\">\r\n  &lt;div class=\"panel-heading\">User Detail&lt;\/div>\r\n  &lt;div class=\"panel-body\">\r\n    &lt;ul>\r\n      &lt;li>ID:{{user.id}}&lt;\/li>\r\n      &lt;li>FirstName:{{user.firstName}}&lt;\/li>\r\n      &lt;li>LastName:{{user.lastName}}&lt;\/li>\r\n      &lt;li>Address:{{user.address}}&lt;\/li>\r\n      &lt;li>Age:{{user.age}}&lt;\/li>\r\n    &lt;\/ul>\r\n    &lt;a class=\"btn btn-primary\" href=\"#\/users\/{{user.id}}\/edit\" role=\"button\">User Edit&lt;\/a>\r\n    &lt;a class=\"btn btn-primary\" href=\"#\/users\/main\" role=\"button\">Back&lt;\/a>&lt;br \/>\r\n  &lt;\/div>\r\n&lt;\/div>\r\n\r\n<strong>(component\/user_new.html)<\/strong>\r\n&lt;div class=\"panel panel-default\">\r\n  &lt;div class=\"panel-heading\">User Create&lt;\/div>\r\n  &lt;div class=\"panel-body\">\r\n    &lt;span>New User Info&lt;\/span>&lt;br \/>\r\n    &lt;ul>\r\n      &lt;li>FirstName:{{new_data.firstName}}&lt;\/li>\r\n      &lt;li>LastName:{{new_data.lastName}}&lt;\/li>\r\n      &lt;li>Address:{{new_data.address}}&lt;\/li>\r\n      &lt;li>Age:{{new_data.age}}&lt;\/li>\r\n    &lt;\/ul>\r\n    &lt;button class=\"btn btn-primary\" ng-click=\"create()\">Create&lt;\/button>\r\n    &lt;a class=\"btn btn-primary\" href=\"#\/users\/main\" role=\"button\">Back&lt;\/a>&lt;br \/>\r\n    &lt;strong>Result&lt;\/strong>&lt;br \/>\r\n    &lt;span>{{Result}}&lt;\/span>&lt;br \/>\r\n  &lt;\/div>\r\n&lt;\/div>\r\n\r\n<strong>(component\/user_edit.html)<\/strong>\r\n&lt;div class=\"panel panel-default\">\r\n  &lt;div class=\"panel-heading\">User Edit&lt;\/div>\r\n  &lt;div class=\"panel-body\">\r\n    &lt;span>User Edit info&lt;\/span>&lt;br \/>\r\n    &lt;ul>\r\n      &lt;li>FirstName:{{user.firstName}}&lt;\/li>\r\n      &lt;li>LastName:{{user.lastName}}&lt;\/li>\r\n      &lt;li>Address:{{user.address}}&lt;\/li>\r\n      &lt;li>Age:{{user.age}}&lt;\/li>\r\n    &lt;\/ul>\r\n    &lt;button class=\"btn btn-primary\" ng-click=\"update(user)\">Update&lt;\/button>\r\n    &lt;a class=\"btn btn-primary\" href=\"#\/users\/main\" role=\"button\">Back&lt;\/a>&lt;br \/>\r\n    &lt;strong>Result&lt;\/strong>&lt;br \/>\r\n    &lt;span>{{Result}}&lt;\/span>&lt;br \/>\r\n  &lt;\/div>\r\n&lt;\/div>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n<tab heading=\"dart\">\r\n<pre>\r\n<strong>(main.dart)<\/strong>\r\nlibrary WpDartExample;\r\nimport 'dart:html';\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\n\r\nimport 'package:WpDartExample\/component\/users_demo.dart';\r\nimport 'package:WpDartExample\/component\/userindex_demo.dart';\r\nimport 'package:WpDartExample\/component\/usershow_demo.dart';\r\nimport 'package:WpDartExample\/component\/useredit_demo.dart';\r\nimport 'package:WpDartExample\/component\/usernew_demo.dart';\r\nimport 'package:WpDartExample\/routing\/router_demo.dart';\r\n\r\nclass MyAppModule extends Module {\r\n  MyAppModule() {\r\n    bind(UsersDemoComponent);\r\n    bind(UserindexDemoComponent);\r\n    bind(UsershowDemoComponent);\r\n    bind(UsereditDemoComponent);\r\n    bind(UsernewDemoComponent);\r\n    bind(RouteInitializerFn, toValue: RouterDemoInitializer);\r\n    bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));\r\n  }\r\n}\r\nvoid main() {\r\n  applicationFactory()\r\n      .addModule(new MyAppModule())\r\n      .run();\r\n}\r\n\r\n<strong>(router_demo.dart)<\/strong>\r\nlibrary WpDartExample.router;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\nvoid RouterDemoInitializer(Router router, RouteViewFactory views) {\r\n  views.configure({\r\n    'users': ngRoute(\r\n      path: '\/users',\r\n      viewHtml: '&lt;userindex-demo>&lt;\/userindex-demo>'),\r\n    'main': ngRoute(\r\n      path: '\/users\/main',\r\n      view: 'view\/user_main.html'),\r\n    'new': ngRoute(\r\n      path: '\/users\/new',\r\n      viewHtml: '&lt;usernew-demo>&lt;\/usernew-demo>'),\r\n    'show': ngRoute(\r\n      path: '\/users\/:id',\r\n      viewHtml: '&lt;usershow-demo>&lt;\/usershow-demo>'),\r\n    'edit': ngRoute(\r\n      path: '\/users\/:id\/edit',\r\n      viewHtml: '&lt;useredit-demo>&lt;\/useredit-demo>'),\r\n\/\/    'users_default': ngRoute(\r\n\/\/      defaultRoute: true,\r\n\/\/      enter: (RouteEnterEvent e) =>\r\n\/\/                router.go('main', {},\r\n\/\/                  replace: true)\r\n\/\/      )\r\n  });\r\n}\r\n\r\n<strong>(users_demo.dart)<\/strong>\r\nlibrary WpDartExample.users;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\n@Component(\r\n  selector: 'users-demo',\r\n  templateUrl: 'users_demo.html',\r\n  useShadowDom: false)\r\nclass UsersDemoComponent {\r\n}\r\n\r\n<strong>(userindex_demo.dart)<\/strong>\r\nlibrary WpDartExample.userindex;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\n@Component(\r\n  selector: 'userindex-demo',\r\n  templateUrl: 'userindex_demo.html',\r\n  useShadowDom: false)\r\nclass UserindexDemoComponent {\r\n  final Http _http;\r\n  List&lt;Map> users = [];\r\n  String svrURL;\r\n  String Result;\r\n  UserindexDemoComponent(this._http) {\r\n    _getusers();\r\n  }\r\n  \r\n  void _getusers() {\r\n    svrURL = \"\/rest\/users\/\";\r\n    _http.get(svrURL)\r\n      .then((HttpResponse response) {\r\n        users = response.data;\r\n        Result = \"status: \" + response.status.toString() + \"\\n\" +\r\n                 \"headers: \" + response.config.headers.toString();\r\n      })\r\n      .catchError((e) {\r\n        users = [];\r\n        Result = \"status: \" + e.status.toString() + \"\\n\" +\r\n                 \"contents: \" + e.data;\r\n      });\r\n  }\r\n  void destroy(id) {\r\n    svrURL = \"\/rest\/users\/\" + id.toString();\r\n    _http.delete(svrURL)\r\n      .then((HttpResponse response) {\r\n        Result = \"User(id: \" + id.toString() + \")Delete Complete.Index is not updated because of a test purpose\";\r\n      })\r\n      .catchError((e) {\r\n        users = [];\r\n        Result = \"status: \" + e.status.toString() + \"\\n\" +\r\n                 \"contents: \" + e.data;\r\n      });\r\n  }\r\n}\r\n\r\n<strong>(usershow_demo.dart)<\/strong>\r\nlibrary WpDartExample.usershow;\r\n\r\nimport 'package:angular\/angular.dart';\r\n\r\n@Component(\r\n  selector: 'usershow-demo',\r\n  templateUrl: 'usershow_demo.html',\r\n  useShadowDom: false)\r\nclass UsershowDemoComponent {\r\n  final Http _http;\r\n  Map user = {};\r\n  String _id;\r\n  String svrURL;\r\n  String Result;\r\n  UsershowDemoComponent(this._http,RouteProvider routeProvider) {\r\n    _id = routeProvider.parameters['id'];\r\n    _getuser(_id);\r\n  }\r\n  \r\n  void _getuser(id) {\r\n    svrURL = \"\/rest\/users\/\" + id ;\r\n    _http.get(svrURL)\r\n      .then((HttpResponse response) {\r\n        user = response.data;\r\n        Result = \"status: \" + response.status.toString() + \"\\n\" +\r\n                 \"headers: \" + response.config.headers.toString();\r\n      })\r\n      .catchError((e) {\r\n        user = {};\r\n        Result = \"status: \" + e.status.toString() + \"\\n\" +\r\n                 \"contents: \" + e.data;\r\n      });\r\n  }\r\n}\r\n\r\n<strong>(usernew_demo.dart)<\/strong>\r\nlibrary WpDartExample.usernew;\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'dart:async' show Future;\r\n\r\n@Component(\r\n  selector: 'usernew-demo',\r\n  templateUrl: 'usernew_demo.html',\r\n  useShadowDom: false)\r\nclass UsernewDemoComponent {\r\n  final Http _http;\r\n  Map new_data = {\r\n    \"firstName\": \"first4_new\",\r\n    \"lastName\": \"last4_new\",\r\n    \"address\": \"address4_new\",\r\n    \"age\": \"age4_new\"\r\n  };\r\n  String svrURL;\r\n  String Result;\r\n  UsernewDemoComponent(this._http) {\r\n  }\r\n  \r\n  Future create() {\r\n    svrURL = \"\/rest\/users\/\";\r\n    return _http.post(svrURL,new_data)\r\n             .then((HttpResponse response) {\r\n               Result = \"User Create Complete.\";\r\n             })\r\n             .catchError((e) {\r\n               Result = \"status: \" + e.status.toString() + \"\\n\" +\r\n                                \"contents: \" + e.data;\r\n             });\r\n  }\r\n}\r\n\r\n<strong>(useredit_demo.dart)<\/strong>\r\nlibrary WpDartExample.useredit;\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'dart:async' show Future;\r\n\r\n@Component(\r\n  selector: 'useredit-demo',\r\n  templateUrl: 'useredit_demo.html',\r\n  useShadowDom: false)\r\nclass UsereditDemoComponent {\r\n  final Http _http;\r\n  Map user = {};\r\n  String _id;\r\n  String svrURL;\r\n  String Result;\r\n  UsereditDemoComponent(this._http,RouteProvider routeProvider) {\r\n    _id = routeProvider.parameters['id'];\r\n    _getuser(_id);\r\n  }\r\n  \r\n  void _getuser(id) {\r\n    svrURL = \"\/rest\/users\/\" + id ;\r\n    _http.get(svrURL)\r\n      .then((HttpResponse response) {\r\n        user = response.data;\r\n        user[\"firstName\"] += \"_rev\";\r\n        user[\"lastName\"] += \"_rev\";\r\n        user[\"address\"] += \"_rev\";\r\n        user[\"age\"] += \"_rev\";\r\n      })\r\n      .catchError((e) {\r\n        user = {};\r\n        Result = \"status: \" + e.status.toString() + \"\\n\" +\r\n                 \"contents: \" + e.data;\r\n      });\r\n  }\r\n  Future update(user) {\r\n    svrURL = \"\/rest\/users\/\" + _id;\r\n    return _http.put(svrURL,user)\r\n             .then((HttpResponse response) {\r\n               Result = \"User(id: \" + _id + \")Update Complete.\";\r\n             })\r\n             .catchError((e) {\r\n               Result = \"status: \" + e.status.toString() + \"\\n\" +\r\n                                \"contents: \" + e.data;\r\n             });\r\n  }\r\n}\r\n<\/pre>\r\n<\/tab>\r\n\r\n<tab heading=\"css,pubspec\">\r\n<pre>\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n   display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.8 <0.7.0'\r\ntransformers:\r\n- angular:\r\n    html_files:\r\n      - lib\/component\/users_demo.html\r\n      - lib\/component\/userindex_demo.html\r\n      - lib\/component\/usershow_demo.html\r\n      - lib\/component\/useredit_demo.html\r\n      - lib\/component\/usernew_demo.html\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n<script type=\"application\/dart\" src='http:\/\/dart.honobono-life.info\/wp-content\/themes\/ang\/dart\/wp\/main.dart'><\/script><script type=\"text\/javascript\"  src='http:\/\/dart.honobono-life.info\/wp-content\/themes\/ang\/dart\/packages\/browser\/dart.js'><\/script>","protected":false},"excerpt":{"rendered":"<p>AngularDart : 1.1.0 Dart : 1.8.5 Bootstrap : 3.2.0 include file dart.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[4],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/1"}],"collection":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1"}],"version-history":[{"count":38,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":97,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions\/97"}],"wp:attachment":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}