\r\n\r\n
\r\n(html)\r\n<head>\r\n.....\r\n <script defer src=\"main.dart\" type=\"application\/dart\"><\/script>\r\n <script defer src=\"packages\/browser\/dart.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <my-app>Loading...<\/my-app>\r\n<\/body>\r\n\r\n(pubspec.yaml)\r\n.....\r\nenvironment:\r\n sdk: '>=1.24.0 <2.0.0'\r\ndependencies:\r\n angular: ^4.0.0\r\n angular_forms: ^1.0.0\r\n angular_router: ^1.0.2\r\n http: ^0.11.0\r\n stream_transform: ^0.0.6\r\n\r\ndev_dependencies:\r\n angular_test: ^1.0.0\r\n browser: ^0.10.0\r\n dart_to_js_script_rewriter: ^1.0.1\r\n mockito: ^2.0.2\r\n test: ^0.12.21\r\n\r\ntransformers:\r\n- angular:\r\n entry_points:\r\n - web\/main.dart\r\n - test\/**_test.dart\r\n- test\/pub_serve:\r\n $include: test\/**_test.dart\r\n- dart_to_js_script_rewriter\r\n<\/pre>\r\n\r\n <\/div>\r\n\r\n \r\n
\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_forms\/angular_forms.dart';\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\n@Component(\r\n selector: 'my-app',\r\n styles: const [\r\n '''\r\n .detail > *:first-child {font-weight: bold}\r\n '''\r\n ],\r\n template: '''\r\n<strong>1)ng-if<\/strong><br \/>\r\n <br \/>\r\n <div class=\"checkbox\">\r\n <label>\r\n <input type=\"checkbox\" [(ngModel)]=\"detail\" \/>Detail\r\n <\/label>\r\n <\/div>\r\n <ul>\r\n <li *ngFor=\"let member of members\">{{member.name}}\r\n <div *ngIf=\"detail\">\r\n <ul>\r\n <li>age:{{member.age}}<\/li>\r\n <li>address:{{member.address}}<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n<strong>\uff12\uff09[style.display],[hidden]<\/strong><br\/>\r\n <br \/>\r\n <ul>\r\n <li *ngFor=\"let member of members\">{{member.name}}\r\n <ul class=\"detail\">\r\n <li [style.display]=\"member.age_v ? 'list-item' : 'none'\">age:{{member.age}}<\/li>\r\n <li [hidden]=\"member.address_v\">address:{{member.address}}<\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n ''',\r\n directives: const [formDirectives,CORE_DIRECTIVES]\r\n)\r\nclass AppComponent {\r\n List<Member> 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 bool detail;\r\n}\r\n\r\nvoid main() {\r\n bootstrap(AppComponent);\r\n}\r\n<\/pre>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n