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