\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\n@Component(\r\n selector: 'my-app',\r\n template: '''\r\n <div class=\"checkbox\">\r\n <label>\r\n <input type=\"checkbox\" [(ngModel)]=\"chk1\" \/>\u30af\u30e9\u30b9\u3001\u30b9\u30bf\u30a4\u30eb\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\r\n\u3067CSS\u8a2d\u5b9a\r\n <\/label>\r\n <\/div>\r\n <strong>\uff11\uff09\u30af\u30e9\u30b9\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/strong><br \/>\r\n <ul [class.bg-danger]=\"chk1\">\r\n <li *ngFor=\"let member of members\">{{member.name}}\r\n <ul>\r\n <li [class]=\"c_li1\">\u5e74\u9f62\uff1a{{member.age}}<\/li>\r\n <li [class]=\"c_li2\">\u4f4f\u6240\uff1a{{member.address}}<\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <strong>\uff12\uff09\u30b9\u30bf\u30a4\u30eb\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/strong><br \/>\r\n <button [style.color] = \"chk1 ? 'red' : 'green'\">Red<\/button>\r\n <button [style.backgroundColor]=\"chk1 ?'cyan' : 'grey'\" >Save<\/button>\r\n <button [style.fontSize.em]=\"chk1 ? 3 : 1\" >Big<\/button>\r\n <button [style.fontSize.%]=\"!chk1 ? 150 : 50\" >Small<\/button><br \/>\r\n <strong>\uff13\uff09NgClass\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6<\/strong><br \/>\r\n <div class=\"checkbox\">\r\n <label>\r\n <input type=\"checkbox\" [(ngModel)]=\"chk3\" \/>Ngclass\u3067CSS\u8a2d\u5b9a\r\n <\/label>\r\n <\/div>\r\n <ul [ngClass]=\"{'bg-Danger': chk3, 'bg-success': !chk3}\">\r\n <li *ngFor=\"let member of members\">{{member.name}}\r\n <ul>\r\n <li [ngClass]=\"chk3 ? 'text-danger bg-info'\r\n :'text-info bg-warning'\">\u5e74\u9f62\uff1a{{member.age}}<\/li>\r\n <li [ngClass]=\"chk3 ? ['text-info','bg-warning']\r\n :['text-danger','bg-info']\">\u4f4f\u6240\uff1a{{member.address}}<\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <strong>\uff14\uff09NgStyle\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6<\/strong><br \/>\r\n <div class=\"checkbox\">\r\n <label>\r\n <input type=\"checkbox\" [(ngModel)]=\"chk4\" \/>\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\r\n <\/label>\r\n <\/div>\r\n <p [ngStyle]=\"{'font-style': styleExp1(chk4)}\">\r\n ngStyle\u3067\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u3001\u5f62\u5f0f\u2460\r\n <\/p>\r\n <p [ngStyle]=\"chk4 ? styleExp2 : styleExp3 \">\r\n ngStyle\u3067\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u3001\u5f62\u5f0f\u2461\r\n <\/p>\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,'1st Ave Seattle WA'),\r\n new Member('Jessie',55,'2nd Ave Seattle WA'),\r\n new Member('Peter',20,'Mercer St Seattle WA'),\r\n new Member('Erika',37,'Alaskan Way Seattle WA')\r\n ];\r\n bool chk1;\r\n bool chk3;\r\n bool chk4;\r\n String c_li1 = \"text-info bg-warning\";\r\n String c_li2 = \"text-danger bg-info\";\r\n Map styleExp2 = {'font-style': 'italic', 'color': '#ff0000'};\r\n Map styleExp3 = {'font-style': 'normal', 'color': '#008000'};\r\n String styleExp1(chk) {\r\n if (chk) {\r\n return 'italic';\r\n } else {\r\n return 'normal';\r\n }\r\n }\r\n}\r\n\r\nclass Member {\r\n String name;\r\n int age;\r\n String address;\r\n \r\n Member(this.name,this.age,this.address,);\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