\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 <\/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<strong>1)DatePipe<\/strong><br \/>\r\n\r\n<p>new DateTime(1988, 4, 15) {{ birthday | date:\"yMMdd\" }}<\/p>\r\n\r\n<strong>2)DecimalPipe<\/strong><br \/>\r\n\r\n<p>3.141592\uff1a(3.2-4): {{3.141592 | number:'3.2-4'}}<\/p>\r\n<p>3.1 \uff1a(3.2-4): {{3.1 | number:'3.2-4'}}<\/p>\r\n<p>3.141592\uff1a(1.1-1): {{3.141592 | number:'1.1-1'}}<\/p>\r\n<p>12345 (number): {{12345 | number}}<\/p>\r\n\r\n<strong>3)CurrencyPipe<\/strong><br \/>\r\n\r\n<p>51259: {{51259 | currency:'JPY':false}}<\/p>\r\n<p>15315731: {{15315731 | currency:'JPY':true}}<\/p>\r\n\r\n<strong>4)JsonPipe<\/strong><br \/>\r\n\r\n<p>Not JsonPipe<\/p>\r\n<pre>{{object}}<\/pre>\r\n<p>JsonPipe<\/p>\r\n<pre>{{object | json}}<\/pre>\r\n\r\n<strong>5)SlicePipe<\/strong><br \/>\r\n\r\n<select (change)=\"start=\\$event.target.value\" >\r\n <option *ngFor=\"let index of indexes\" [value]=index>{{index}}<\/option>\r\n<\/select>:\r\n<select (change)=\"end=\\$event.target.value\" >\r\n <option *ngFor=\"let index of indexes\" [value]=index>{{index}}<\/option>\r\n<\/select>\r\n<ul>\r\n <li *ngFor=\"let i of collection | slice:conv(start):conv(end)\">{{i}}<\/li>\r\n<\/ul>\r\n ''',\r\n directives: const [CORE_DIRECTIVES, formDirectives],\r\n pipes: const [COMMON_PIPES]\r\n)\r\nclass AppComponent {\r\n DateTime birthday = new DateTime(1988, 4, 15);\r\n int start = 0;\r\n int end = 10;\r\n int i;\r\n int conv(idx) {\r\n if(idx is String) {\r\n this.i = int.parse(idx);\r\n } else {\r\n this.i = idx;\r\n }\r\n return this.i;\r\n }\r\n List collection = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\r\n List indexes = [0,1,2,3,4,5,6,7,8,9];\r\n Map object = {'foo': 'bar', 'nested': {'numbers': [1, 2]}};\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