\r\n\r\n
\r\n(html)\r\n<head>\r\n.....\r\n <base href=\"\/ngdart\/sample\/web\/\">\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)<\/strong>\r\nimport 'dart:async';\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_router\/angular_router.dart';\r\n\r\nimport 'package:http\/browser_client.dart';\r\n\r\nimport '.\/rest\/user-index.component.dart';\r\nimport '.\/rest\/user-new.component.dart';\r\nimport '.\/rest\/user-show.component.dart';\r\nimport '.\/rest\/user-edit.component.dart';\r\nimport '.\/rest\/user_service.dart';\r\n\r\n@Component(\r\n selector: 'my-app',\r\n template: '''\r\n <h1>{{title}}<\/h1>\r\n <nav>\r\n <a [routerLink]=\"['Users']\">Users<\/a>\r\n <a [routerLink]=\"['New']\">New<\/a>\r\n <\/nav>\r\n <router-outlet><\/router-outlet>\r\n ''',\r\n directives: const [ROUTER_DIRECTIVES],\r\n providers: const [UserService, ROUTER_PROVIDERS])\r\n@RouteConfig(const [\r\n const Route(\r\n path: 'new',\r\n name: 'New',\r\n component: UserNewComponent),\r\n const Route(\r\n path: '\/users',\r\n name: 'Users',\r\n component: UserIndexComponent),\r\n const Route(\r\n path: 'users\/:id',\r\n name: 'Show',\r\n component: UserShowComponent),\r\n const Route(\r\n path: 'users\/:id\/edit',\r\n name: 'Edit',\r\n component: UserEditComponent)\r\n])\r\nclass AppComponent {\r\n String title = 'User Information';\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(user_service.dart)<\/strong>\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 User {\r\n int id;\r\n String firstname;\r\n String lastname;\r\n String address;\r\n String email;\r\n\r\n User(this.id, this.firstname, this.lastname, this.address, this.email);\r\n Map toJson() => {'id': id, 'firstname': firstname, 'lastname': lastname, 'address': address, 'email': email};\r\n}\r\n\r\n@Injectable()\r\nclass UserService {\r\n String _url;\r\n Map _headers;\r\n BrowserClient _http;\r\n UserService(this._http);\r\n\r\n Future<List<User>> index() async {\r\n _url = 'http:\/\/localhost\/ngdart\/ng4\/sample\/rest\/users';\r\n try {\r\n final response = await _http.get(_url);\r\n final users = JSON.decode(response.body)\r\n .map((value) => new User(value['id'], value['firstname'], value['lastname'], value['address'], value['email']))\r\n .toList();\r\n return users;\r\n } catch (e) {\r\n throw _handleError(e);\r\n }\r\n }\r\n\r\n Future<Map> create(Map data) async {\r\n _url = 'http:\/\/localhost\/ngdart\/ng4\/sample\/rest\/users';\r\n _headers = {'Content-Type': 'application\/json'};\r\n try {\r\n final response = await _http.post(_url, headers: _headers, body: JSON.encode(data));\r\n final user = JSON.decode(response.body);\r\n return user;\r\n } catch (e) {\r\n throw _handleError(e);\r\n }\r\n }\r\n\r\n Future<Map> update(User data) async {\r\n _url = 'http:\/\/localhost\/ngdart\/ng4\/sample\/rest\/users\/${data.id}';\r\n _headers = {'Content-Type': 'application\/json'};\r\n try {\r\n final response = await _http.put(_url, headers: _headers, body: JSON.encode(data));\r\n final user = JSON.decode(response.body);\r\n return user;\r\n } catch (e) {\r\n throw _handleError(e);\r\n }\r\n }\r\n\r\n Future<User> show(int id) async {\r\n _url = 'http:\/\/localhost\/ngdart\/ng4\/sample\/rest\/users\/' + id.toString();\r\n try {\r\n final response = await _http.get(_url);\r\n Map res = JSON.decode(response.body);\r\n User user = new User(res['id'], res['firstname'], res['lastname'], res['address'], res['email']);\r\n return user;\r\n } catch (e) {\r\n throw _handleError(e);\r\n }\r\n }\r\n\r\n Future<Map> destroy(int id) async {\r\n try {\r\n _url = 'http:\/\/localhost\/ngdart\/ng4\/sample\/rest\/users\/$id';\r\n _headers = {'Content-Type': 'application\/json'};\r\n final response = await _http.delete(_url, headers: _headers);\r\n final result = JSON.decode(response.body);\r\n return result;\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(user-index.component.dart)<\/strong>\r\nimport 'dart:async';\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_router\/angular_router.dart';\r\n\r\nimport 'user_service.dart';\r\n\r\n@Component(\r\n selector: 'user-index',\r\n template: '''\r\n<table class=\"table table-striped table-bordered\">\r\n <thead>\r\n <tr><th>ID<\/th><th>First Name<\/th><th>Last name<\/th><th><\/th><\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of users\">\r\n <td>{{item.id}}<\/td>\r\n <td>{{item.firstname}}<\/td>\r\n <td>{{item.lastname}}<\/td>\r\n <td>\r\n <button class=\"btn btn-primary\" (click)=\"show(item.id)\">Detail<\/button>\r\n <button class=\"btn btn-primary\" (click)=\"destroy(item.id)\">Delete<\/button>\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n<strong>Result<\/strong><br \/>\r\n<span>{{Result | json}}<\/span><br \/>\r\n<button class=\"btn btn-primary\" (click)=\"cancel()\">Back<\/button>\r\n ''',\r\n directives: const [CORE_DIRECTIVES],\r\n pipes: const [COMMON_PIPES]\r\n)\r\nclass UserIndexComponent implements OnInit {\r\n List<User> users;\r\n\r\n final Router _router;\r\n final UserService _userService;\r\n Map Result;\r\n UserIndexComponent(this._userService,this._router);\r\n\r\n Future<Null> index() async {\r\n users = await _userService.index();\r\n }\r\n void ngOnInit() {\r\n index();\r\n }\r\n void show(int id) {\r\n _router.navigate(['Show', {'id': id.toString()}]);\r\n }\r\n Future<Null> destroy(int id) async {\r\n Result = await _userService.destroy(id);\r\n Result['comment'] = \"User Index is not updated for demo.\";\r\n }\r\n void cancel() {\r\n _router.navigate(['Users']);\r\n }\r\n}\r\n\r\n\r\n(user-new.component.dart)<\/strong>\r\nimport 'dart:async';\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_router\/angular_router.dart';\r\n\r\nimport 'user_service.dart';\r\n\r\n@Component(\r\n selector: 'user-new',\r\n template: '''\r\n<div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">User Registration<\/div>\r\n <div class=\"panel-body\">\r\n <span>Registration data<\/span><br \/>\r\n <ul>\r\n <li>FirstName:{{new_data[\"firstname\"]}}<\/li>\r\n <li>LastName:{{new_data[\"lastname\"]}}<\/li>\r\n <li>Address:{{new_data[\"address\"]}}<\/li>\r\n <li>Email:{{new_data[\"email\"]}}<\/li>\r\n <\/ul>\r\n <button class=\"btn btn-primary\" (click)=\"create()\">Run<\/button>\r\n <button class=\"btn btn-primary\" (click)=\"cancel()\">Back<\/button><br \/>\r\n <strong>Result<\/strong><br \/>\r\n <span>{{Result | json}}<\/span><br \/>\r\n <\/div>\r\n<\/div>\r\n ''',\r\n directives: const [CORE_DIRECTIVES],\r\n pipes: const [COMMON_PIPES]\r\n)\r\nclass UserNewComponent {\r\n final Router _router;\r\n final UserService _userService;\r\n Map new_data = {\r\n \"firstname\": \"first4_new\",\r\n \"lastname\": \"last4_new\",\r\n \"address\": \"address4_new\",\r\n \"email\": \"email4_new\",\r\n };\r\n Map Result;\r\n UserNewComponent(this._userService,this._router);\r\n\r\n Future<Null> create() async {\r\n Result = await _userService.create(new_data);\r\n }\r\n void cancel() {\r\n _router.navigate(['Users']);\r\n }\r\n}\r\n\r\n\r\n(user-show.component.dart)<\/strong>\r\nimport 'dart:async';\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_router\/angular_router.dart';\r\n\r\nimport 'user_service.dart';\r\n\r\n@Component(\r\n selector: 'user-show',\r\n template: '''\r\n<div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">User Detail<\/div>\r\n <div class=\"panel-body\">\r\n <ul *ngIf=\"user != null\">\r\n <li>ID:{{user.id}}<\/li>\r\n <li>FirstName:{{user.firstname}}<\/li>\r\n <li>LastName:{{user.lastname}}<\/li>\r\n <li>Address:{{user.address}}<\/li>\r\n <li>Email:{{user.email}}<\/li>\r\n <\/ul>\r\n <button class=\"btn btn-primary\" (click)=\"edit(user.id)\">Change<\/button>\r\n <button class=\"btn btn-primary\" (click)=\"cancel()\">Back<\/button>\r\n <\/div>\r\n<\/div>\r\n ''',\r\n directives: const [CORE_DIRECTIVES],\r\n pipes: const [COMMON_PIPES]\r\n)\r\nclass UserShowComponent implements OnInit {\r\n User user;\r\n final Router _router;\r\n final RouteParams _routeParams;\r\n final UserService _userService;\r\n\r\n UserShowComponent(this._userService,this._router,this._routeParams);\r\n\r\n Future<Null> ngOnInit() async {\r\n var _id = _routeParams.get('id');\r\n var id = int.parse(_id ?? '', onError: (_) => null);\r\n if (id != null) user = await (_userService.show(id));\r\n }\r\n\r\n void edit(int id) {\r\n _router.navigate(['Edit', {'id': id.toString()}]);\r\n }\r\n\r\n void cancel() {\r\n _router.navigate(['Users']);\r\n }\r\n}\r\n\r\n\r\n(user-edit.component.dart)<\/strong>\r\nimport 'dart:async';\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_router\/angular_router.dart';\r\n\r\nimport 'user_service.dart';\r\n\r\n@Component(\r\n selector: 'user-edit',\r\n template: '''\r\n<div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">User Change<\/div>\r\n <div class=\"panel-body\">\r\n <span>User Change Information<\/span><br \/>\r\n <ul *ngIf=\"user != null\">\r\n <li>FirstName:{{user.firstname}}<\/li>\r\n <li>LastName:{{user.lastname}}<\/li>\r\n <li>Address:{{user.address}}<\/li>\r\n <li>Email:{{user.email}}<\/li>\r\n <\/ul>\r\n <button class=\"btn btn-primary\" (click)=\"update(user)\">Run<\/button>\r\n <button class=\"btn btn-primary\" (click)=\"cancel()\">Back<\/button><br \/>\r\n <strong>Result<\/strong><br \/>\r\n <span>{{Result | json}}<\/span><br \/>\r\n <\/div>\r\n<\/div>\r\n ''',\r\n directives: const [CORE_DIRECTIVES],\r\n pipes: const [COMMON_PIPES]\r\n)\r\nclass UserEditComponent implements OnInit {\r\n User user;\r\n final Router _router;\r\n final RouteParams _routeParams;\r\n final UserService _userService;\r\n Map Result;\r\n UserEditComponent(this._userService,this._router,this._routeParams);\r\n\r\n Future<Null> ngOnInit() async {\r\n var _id = _routeParams.get('id');\r\n var id = int.parse(_id ?? '', onError: (_) => null);\r\n if (id != null) user = await (_userService.show(id));\r\n user.firstname += \"_rev\";\r\n user.lastname += \"_rev\";\r\n user.address += \"_rev\";\r\n user.email += \"_rev\";\r\n }\r\n\r\n Future<Null> update(User data) async {\r\n Result = await _userService.update(data);\r\n }\r\n\r\n void cancel() {\r\n _router.navigate(['Users']);\r\n }\r\n}\r\n<\/pre>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n