\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\n(main.dart)\r\nimport 'dart:async';\r\nimport 'dart:convert';\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:http\/browser_client.dart';\r\n\r\nimport 'http_service.dart';\r\n\r\nclass Friend {\r\n int id;\r\n String name;\r\n int age;\r\n String address;\r\n\r\n Friend(this.id,this.name,this.age,this.address);\r\n}\r\n\r\n@Component(\r\n selector: 'my-app',\r\n template: '''\r\n <ul>\r\n <li *ngFor=\"let friend of friends\">\r\n <span class=\"badge badge-default\">{{friend.id}}<\/span> {{friend.name}}\r\n <\/li>\r\n <\/ul>\r\n <button (click)=\"get1(true)\">Http Get<\/button>\r\n <button (click)=\"get1(false)\">Http Get Error<\/button><br \/>\r\n <div *ngIf=\"show\">\r\n <strong>Http Response Data<\/strong><br \/>\r\n <table class=\"table table-striped\">\r\n <thead><tr>\r\n <th>\u2116<\/th><th>Name<\/th><th>Age<\/th><th>Address<\/th>\r\n <\/tr><\/thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of friends1\">\r\n <td>{{item.id}}<\/td>\r\n <td>{{item.name}}<\/td>\r\n <td>{{item.age}}<\/td>\r\n <td>{{item.address}}<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div *ngIf=\"!show\">\r\n <strong>HTTP Error<\/strong><br \/>\r\n <span>Status Code: {{status}}<\/span><br \/>\r\n <span>Error Comment: {{error}}<\/span><br \/>\r\n <\/div>\r\n ''',\r\n directives: const [CORE_DIRECTIVES],\r\n providers: const [HttpService]\r\n)\r\nclass AppComponent implements OnInit {\r\n String error;\r\n int status;\r\n bool show = false;\r\n List<Friend> friends;\r\n List<Friend> friends1;\r\n HttpService _httpService;\r\n String _url = \"json\/friends.json\";\r\n AppComponent(this._httpService);\r\n\r\n Future<Null> get(String url) async {\r\n friends = await _httpService.get(url);\r\n }\r\n void ngOnInit() {\r\n get(_url);\r\n }\r\n void get1(bool tf) async {\r\n show = tf;\r\n var client = new BrowserClient();\r\n if (tf) {\r\n await client.get('json\/friends.json')\r\n .then((response) {\r\n friends1 = JSON.decode(response.body)['data']\r\n .map((value) => new Friend(value['id'], value['name'],value['age'],value['address']))\r\n .toList();\r\n })\r\n .catchError((e) {\r\n error = e;\r\n });\r\n } else {\r\n await client.get('invalid-url')\r\n .then((response) {\r\n status = response.statusCode;\r\n error = response.body.substring(50,100);\r\n })\r\n .catchError((e) {\r\n error = e;\r\n });\r\n }\r\n }\r\n}\r\n\r\nvoid main() {\r\n bootstrap(AppComponent, [provide(BrowserClient, useFactory: () => new BrowserClient(), deps: [])]\r\n );\r\n}\r\n\r\n\r\n(http_service.dart)\r\nimport 'dart:async';\r\nimport 'dart:convert';\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:http\/browser_client.dart';\r\n\r\nclass Friend {\r\n int id;\r\n String name;\r\n int age;\r\n String address;\r\n\r\n Friend(this.id,this.name,this.age,this.address);\r\n}\r\n\r\n@Injectable()\r\nclass HttpService {\r\n BrowserClient _http;\r\n HttpService(this._http);\r\n\r\n Future<List<Friend>> get(String url) async {\r\n try {\r\n final response = await _http.get(url);\r\n List<Friend> friends = JSON.decode(response.body)['data']\r\n .map((value) => new Friend(value['id'], value['name'],value['age'],value['address']))\r\n .toList();\r\n return friends;\r\n } catch (e) {\r\n throw _handleError(e);\r\n }\r\n }\r\n\r\n Exception _handleError(dynamic e) {\r\n print(e); \/\/ for demo purposes only\r\n return new Exception('Server error; cause: $e');\r\n }\r\n\r\n}\r\n\r\n(friends.json)\r\n{\r\n \"data\": [\r\n {\"id\": 1, \"name\": \"John\", \"age\": 20, \"address\": \"1st Ave Seattle WA\"},\r\n {\"id\": 2, \"name\": \"Jessie\", \"age\": 55, \"address\": \"2nd Ave Seattle WA\"},\r\n {\"id\": 3, \"name\": \"Peter\", \"age\": 20, \"address\": \"Mercer St Seattle WA\"},\r\n {\"id\": 4, \"name\": \"Erika\", \"age\": 37, \"address\": \"Alaskan Way Seattle WA\"}\r\n ]\r\n}\r\n<\/pre>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n