Dart Example

AngularDart v4 Router, RESTful

wp-admin
AngularDart v4 Sample Code,Demo
Loading… 
(html)
<head>
.....
  <base href="/ngdart/sample/web/">
  <script defer src="main.dart" type="application/dart"></script>
  <script defer src="packages/browser/dart.js"></script>
</head>
<body>
  <my-app>Loading...</my-app>
</body>

(pubspec.yaml)
.....
environment:
  sdk: '>=1.24.0 
    
(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']);
  }
}
Exit mobile version