Dart Example

Just another WordPress site

AngularDart

AngularDart Demo

  • AngularDart : 1.1.0
  • Dart : 1.8.5
  • Bootstrap : 3.2.0
  • include file
    • dart.js

#INDEX
1. 2Way binding,ng-repeat,filter
2. ng-include, ng-switch
3. ng-if,ng-show,ng-hide
4. ng-class,ng-style
5. event
6. ng-disabled,ng-checked,ng-readonly,ng-select
7. form validation
8. select,option,radio
9. Built-in formatter
10. Built-in formatter by function
11. Custom formatter
12. Pagination
13. Service
14. Http service, Read from a JSON-encoded file
15. Http service, POST, Interceptor
16. Router, RESTful

1. 2Way binding,ng-repeat,filter




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app todo-controller>
    <h2>Todo List</h2>
    <ul>
      <li ng-repeat="todo in todos">
        <span>{{todo.text}}</span>
      </li>
    </ul>
    <h2>Todo Table</h2>
    Filter: <input type="text" ng-model="nameFilterString">
    <table class="table">
      <thead>
        <tr><th>No.</th><th>Action</th><th>Done</th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="todo in todos | filter:{text:nameFilterString} | orderBy: 'text'" ng-class="$odd ? 'bg-success' : 'bg-warning'">
          <td>{{$index + 1}}</td>
          <td>{{todo.text}}</td>
          <td>{{todo.done}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class TodoController {
  List<Todo> todos;
  String nameFilterString = "";
  
  TodoController() {
    todos = [
      new Todo('learn AngularDart', false),
      new Todo('build an AngularDart App', false),
      new Todo('learn Dart', false),
      new Todo('learn JavaScript', true),
      new Todo('learn Google Maps', true),
      new Todo('learn AngularJS', true)
    ];
  } 
}
 
class Todo {
  String text;
  bool done;
 
  Todo(this.text, this.done);
}
 
class TodoModule extends Module {
  TodoModule() {
    bind(TodoController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new TodoModule())
    .rootContextType(TodoController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}
(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

2. ng-include, ng-switch




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app todo-controller>
    ng-include(1)source is a string
    <div ng-include="view/include_table.html"></div>
    ng-include(2)source is a function
    <form>
      <input type="radio" ng-model="includeFile" value="list">List
      <input type="radio" ng-model="includeFile" value="table">Table
    </form>
    <div ng-include={{switchHtml()}}></div>
    <br />
    ng-switch
    <form>
      <input type="radio" ng-model="sw" value="list">List
      <input type="radio" ng-model="sw" value="table">Table
    </form>
    <div ng-switch="sw">
      <div ng-switch-when="table">
        <table class="table">
          <thead>
            <tr><th>No.</th><th>Action</th><th>Done</th></tr>
          </thead>
          <tbody>
            <tr ng-repeat="todo in todos" ng-class="$odd ? 'bg-success' : 'bg-wa
rning'">
              <td>{{$index + 1}}</td>
              <td>{{todo.text}}</td>
              <td>{{todo.done}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div ng-switch-when="list">
        <ul>
          <li ng-repeat="todo in todos">{{todo.text}} ({{todo.done}})</li>
        </ul>
      </div>
      <div ng-switch-default>
        Select above option to display a layout
      </div>
    </div>
  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class TodoController {
  List<Todo> todos;
  String includeFile = "";
  
  TodoController() {
    todos = [
      new Todo('learn AngularDart', false),
      new Todo('build an AngularDart App', false),
      new Todo('learn Dart', false),
      new Todo('learn JavaScript', true),
      new Todo('learn Google Maps', true),
      new Todo('learn AngularJS', true)
    ];
  }
  String switchHtml() {
    if (includeFile == "list"){
      return "view/include_list.html";
    } else if (includeFile == "table"){
      return "view/include_table.html";
    }
  }
}
 
class Todo {
  String text;
  bool done;
 
  Todo(this.text, this.done);
}
 
class TodoModule extends Module {
  TodoModule() {
    bind(TodoController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new TodoModule())
    .rootContextType(TodoController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular:
    html_files:
    - web/view/include_table.html
    - web/view/include_list.html

(include_list.html)
<ul>
  <li ng-repeat="todo in todos">{{todo.text}} ({{todo.done}})</li>
</ul>

(include_table.html)
<table class="table">
  <thead>
    <tr><th>No.</th><th>Action</th><th>Done</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="todo in todos" ng-class="$odd ? 'bg-success' : 'bg-warning'">
      <td>{{$index + 1}}</td>
      <td>{{todo.text}}</td>
      <td>{{todo.done}}</td>
    </tr>
  </tbody>
</table>

3. ng-if,ng-show,ng-hide




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>
    <strong>1.ng-if</strong>
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="detail" />Detail
      </label>
    </div>
    <ul>
      <li ng-repeat="member in members">{{member.name}}
        <div ng-if="detail">
          <ul>
            <li>age：{{member.age}}</li>
            <li>address：{{member.address}}</li>
          </ul>
        </div>
      </li>
    </ul>
    <strong>2.ng-show</strong>
    <style>
      .detail > *:first-child {color: red}
    </style>
    <ul>
      <li ng-repeat="member in members">{{member.name}}
        <ul class="detail">
          <li ng-show="member.age_v">age：{{member.age}}</li>
          <li ng-show="member.address_v">address：{{member.address}}</li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class MemberController {
  List<Member> members;
  bool detail;
  
  MemberController() {
    members = [
      new Member('John',20,true,'1st Ave Seattle WA',false),
      new Member('Jessie',55,false,'2nd Ave Seattle WA',true),
      new Member('Peter',20,true,'Mercer St Seattle WA',true),
      new Member('Erika',37,false,'Alaskan Way Seattle WA',false)
    ];
  }
}
 
class Member {
  String name;
  int age;
  bool age_v;
  String address;
  bool address_v;
 
  Member(this.name,this.age,this.age_v,this.address,this.address_v);
}
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

4. ng-class,ng-style




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

1.ng-class,ng-style
<div class="checkbox">
  <label>
    <input type="checkbox" ng-model="danger" />applay "bg-warning"class
  </label>
</div>
<ul ng-class="{'bg-warning': danger}">
  <li ng-repeat="member in members">{{member.name}}
    <ul>
      <li ng-style="{color:'red'}">age：{{member.age}}</li>
      <li ng-class="['bg-success','text-danger']">address：{{member.address}}</li>
    </ul>
  </li>
</ul>
2.ng-class-even,ng-class-odd
<style>
  tr.tbl-bg-clr-odd { background-color: lightpink; }
  tr.tbl-bg-clr-even { background-color: lightgreen;}
</style>
<table class="table">
  <thead>
    <tr><th>No.</th><th>name</th><th>age</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="member in members" ng-class-even="tblBgClr.even" ng-class-odd="tblBgClr.odd">
      <td>{{$index + 1}}</td>
      <td>{{member.name}}</td>
      <td>{{member.age}}</td>
    </tr>
  </tbody>
</table>

  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class MemberController {
  List<Member> members;
  bool danger;
  Map tblBgClr;
  
  MemberController() {
    members = [
      new Member('John',20,true,'1st Ave Seattle WA',false),
      new Member('Jessie',55,false,'2nd Ave Seattle WA',true),
      new Member('Peter',20,true,'Mercer St Seattle WA',true),
      new Member('Erika',37,false,'Alaskan Way Seattle WA',false)
    ];
    tblBgClr = {
      "odd": "tbl-bg-clr-odd",
      "even": "tbl-bg-clr-even"
    };
  }
}
 
class Member {
  String name;
  int age;
  bool age_v;
  String address;
  bool address_v;
 
  Member(this.name,this.age,this.age_v,this.address,this.address_v);
}
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

5. event




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

  <p>Click,mouseenter,mouseleave event demo</p>
  <button class="btn" ng-class="btnColor1"
          ng-click="btnColor1='btn-success'"
          ng-mouseenter="btnColor1='btn-primary'"
          ng-mouseleave="btnColor1='btn-defult'"
  >
    Demo1
  </button>
  <button class="btn" ng-class="btnColor2"
          ng-click="handleEvent($event)"
          ng-mouseenter="handleEvent($event)"
          ng-mouseleave="handleEvent($event)"
  >
    Demo2
  </button>

  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class MemberController {
  String btnColor1;
  String btnColor2;
  void handleEvent(e) {
    switch (e.type){
      case "mouseover":
        btnColor2 = "btn-primary";
        break;
      case "mouseenter":
        btnColor2 = "btn-primary";
        break;
      case "click":
        btnColor2 = "btn-success";
        break;
      default:
        btnColor2 = "btn-default";
    }
  }
}
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

6. ng-disabled,ng-checked,ng-readonly,ng-select




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

<input type="checkbox" ng-model="checkValue">Enable/Disable<br />
1)ng-disabled<br />
  <button class="btn btn-success" ng-disabled="checkValue">Button</button><br />
2)ng-checked<br />
  <input type="checkbox" ng-checked="checkValue">Checbox<br />
3)ng-readonly<br />
  <input type="text" ng-readonly="checkValue" value="ReadOnly"/><br />
4)ng-selected<br />
  <select>
    <option selected>Option1</option>
    <option>Option2</option>
    <option ng-selected="checkValue">Selected</option>
  </select>

  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class MemberController {
  bool checkValue;
}
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

7. form validation




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

<style>
  form.ng-invalid.ng-dirty { background-color: lightpink; }
  form.ng-valid.ng-dirty { background-color: lightgreen; }
  form { padding: 10px;}
</style>
<form name="appForm" novalidate>
  <div class="well">
    <div class="form-group" ng-class="{'has-error': appForm['name'].invalid && appForm['name'].dirty}">
      <label>Member ID</label>
      <input type="text" name="name" class="form-control"
         ng-model="user.name" required
         ng-minlength="5" ng-maxlength="10"
         pattern="^[A-Z0-9]+$" />
      <span class="text-danger" ng-show="appForm['name'].dirty && appForm['name'].hasErrorState('ng-required')">This is a required field<br /></span>
      <span class="text-danger" ng-show="appForm['name'].dirty && appForm['name'].hasErrorState('ng-minlength')">Minimum length required is 5<br /></span>
      <span class="text-danger" ng-show="appForm['name'].dirty && appForm['name'].hasErrorState('ng-maxlength')">Max length required is 10<br /></span>
      <span class="text-danger" ng-show="appForm['name'].dirty && appForm['name'].hasErrorState('ng-pattern')">Only uppercase letter,digit<br /></span>
    </div>

    <div class="form-group" ng-class="{'has-error': appForm['email'].invalid && appForm['email'].dirty}">
      <label>Email</label>
      <input type="email" name="email" class="form-control"
        ng-model="user.email" required />
      <span class="text-danger" ng-show="appForm['email'].dirty && appForm['email'].hasErrorState('ng-required')">This is a required field<br /></span>
      <span class="text-danger" ng-show="appForm['email'].dirty && appForm['email'].hasErrorState('ng-email')">Enter a valid email address<br /></span>
    </div>
    <div class="text-center">
      <button ng-disabled="appForm.invalid" ng-click="save()" class="btn btn-primary">Submit
      </button>
    </div>
  </div>
</form>
<div class="well" ng-show="result">
  <strong>Check</strong><br />
  {{master|json}}
</div>

  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class MemberController {
  Map user;
  Map master;
  bool result = false;
  NgForm appForm;
  void save() {
    result = true;
    master = user; 
  }
}
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

8. select,option,radio




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

<select ng-model="selectProduct1" placeholder="Select a Product">
  <option value="">Select a Product</option>
  <option ng-repeat="product in products" ng-value="product.id">{{product.name}}</option>
</select><br />
Selected value:{{selectProduct1}}<br />
<br />
<div class="radio" ng-repeat="product in products">
  <label>
    <input type="radio" ng-model="selectProduct2"
           value="{{product.id}}">{{product.name}}
  </label>
</div><br />
Selected value:{{selectProduct2}}<br />

  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class MemberController {
  List<Product> products;
  String selectProduct1;
  String selectProduct2;
  String selectProduct3;

  MemberController() {
    products = [
      new Product('0101', 'product1','Group-A'),
      new Product('0102', 'product2','Group-A'),
      new Product('0103', 'product3','Group-A'),
      new Product('0201', 'product4','Group-B'),
      new Product('0202', 'product5','Group-B')
    ];
  }
}
class Product {
  String id;
  String name;
  String grp;
 
  Product(this.id, this.name, this.grp);
}
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

9. Built-in formatter




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

orderBy,limitTo,number<br />
<table class="table">
  <thead>
    <tr><th>Date</th><th>Test#1</th><th>Test#2</th><th>Test#3</th><th>Avarage</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="score in scores | orderBy: '-date' |limitTo:3">
      <td>{{score.date}}</td>
      <td>{{score.test1}}</td>
      <td>{{score.test2}}</td>
      <td>{{score.test3}}</td>
      <td>{{(score.test1 + score.test2 + score.test3)/3 | number:1}}</td>
    </tr>
  </tbody>
</table>

Filter(map),orderBy(list),<br />
Filter: <input type="text" ng-model="nameFilterString">
<table class="table">
  <thead>
    <tr><th>Name</th><th>Category</th><th>Price</th><th>Check</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products |filter:{name: nameFilterString, chk: true} | orderBy:['category','price']">
      <td>{{item.name}}</td>
      <td>{{item.category}}</td>
      <td>{{item.price | currency}}</td>
      <td>{{item.chk}}</td>
    </tr>
  </tbody>
</table>

  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class MemberController {
  
  List<Score> scores;
  List<Product> products;
  String nameFilterString = "";
    
  MemberController() {
    scores = [
      new Score('2014/01/08', 74, 52, 68),
      new Score('2014/03/13', 54, 63, 38),
      new Score('2014/04/03', 36, 91, 75),
      new Score('2014/02/11', 71, 52, 48),
      new Score('2014/11/22', 48, 57, 28),
      new Score('2014/05/03', 94, 52, 78)
    ];
    products = [
      new Product('DeskTop #1', "DeskTop", 850, true),
      new Product('DeskTop #4', "DeskTop", 350, false),
      new Product('Laptop #2', "Laptop", 1590, true),
      new Product('DeskTop #2', "DeskTop", 980, true),
      new Product('Laptop #4', "Laptop", 590, false),
      new Product('Laptop #3', "Laptop", 2590, true),
      new Product('Laptop #1', "Laptop", 1490, true)
    ];
  } 
}
class Score {
  String date;
  int test1;
  int test2;
  int test3;
 
  Score(this.date, this.test1, this.test2, this.test3);
}

class Product {
  String name;
  String category;
  int price;
  bool chk;
 
  Product(this.name, this.category, this.price, this.chk);
}
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

10. Built-in formatter by function




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

1.filter by function<br />

<table class="table">
  <thead>
    <tr><th>Date</th><th>Test#1</th><th>Test#2</th><th>Test#3</th><th>Avarage</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="score in scores | filter:selectPass">
      <td>{{score.date}}</td>
      <td>{{score.test1}}</td>
      <td>{{score.test2}}</td>
      <td>{{score.test3}}</td>
      <td>{{(score.test1 + score.test2 + score.test3)/3 | number:1}}</td>
    </tr>
  </tbody>
</table>
  <br />
2.orderBy expression<br />
　
[ <a href="" ng-click="sortClm='date'; reverse=false">back to init</a> ]
<table class="table">
  <thead>
    <tr>
      <th><a href="" ng-click="sortClm = 'date'; reverse=!reverse">Date</a></th>
      <th><a href="" ng-click="sortClm = 'test1'; reverse=!reverse">Test#1</a></th>
      <th><a href="" ng-click="sortClm = 'test2'; reverse=!reverse">Test#2</a></th>
      <th><a href="" ng-click="sortClm = 'test3'; reverse=!reverse">Test#3</a></th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="score in scores | orderBy:sortClm:reverse">
      <td>{{score.date}}</td>
      <td>{{score.test1}}</td>
      <td>{{score.test2}}</td>
      <td>{{score.test3}}</td>
      <td>{{score.test1 + score.test2 + score.test3}}</td>
    </tr>
  </tbody>
</table>
  <br />
3.orderBy function

　
<table class="table">
  <thead>
    <tr><th>Name</th><th>Price</th><th>Stock</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products | orderBy:customOrder">
      <td>{{item.name}}</td>
      <td>{{item.price | currency}}</td>
      <td>{{item.stock}}</td>
    </tr>
  </tbody>
</table>

  </div>
</body>
</html>


import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Injectable()
class MemberController {
  List<Score> scores;
  List<Product> products;
  String sortClm = 'date';
  bool reverse = false;
  
  MemberController() {
    scores = [
      new Score('2014/01/08', 74, 52, 68),
      new Score('2014/03/13', 54, 63, 38),
      new Score('2014/04/03', 36, 91, 75),
      new Score('2014/02/11', 71, 52, 48),
      new Score('2014/11/22', 48, 57, 28),
      new Score('2014/05/03', 94, 52, 78)
    ];
    products = [
      new Product('DeskTop #1', 850, 3),
      new Product('DeskTop #4', 350, 0),
      new Product('Laptop #2', 1590, 6),
      new Product('DeskTop #2', 980, 3),
      new Product('Laptop #4', 590, 0),
      new Product('Laptop #3', 2590, 1),
      new Product('Laptop #1', 1490, 10)
    ];
  }
  bool selectPass(item) {
    if ((item.test1 + item.test2 + item.test3) > 180 ) {
      return true;
    }
  }
  int customOrder(item) {
    return item.stock == 0 ? 99999 : item.price;
  }
}
class Score {
  String date;
  int test1;
  int test2;
  int test3;
 
  Score(this.date, this.test1, this.test2, this.test3);
}

class Product {
  String name;
  int price;
  int stock;
 
  Product(this.name, this.price, this.stock);
}
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
  }
}
 
main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

11. Custom formatter




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

<table class="table">
  <thead>
    <tr><th>Name</th><th>Group</th><th>Price</th><th>Check</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.grp}}</td>
      <td>{{item.chk | checkmarkfilter}}</td>
    </tr>
  </tbody>
</table>

<select ng-model="selectProduct" placeholder="Select a Group">
  <option value="">Select a Group</option>
  <option ng-repeat="product in products | distinctfilter:'grp'" ng-value="product.grp">{{product.grp}}</option>
</select><br />
Selected value:{{selectProduct}}<br />

  </div>
</body>
</html>


(main.dart)
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:WpDartExample/formatter/checkmark_filter.dart';
import 'package:WpDartExample/formatter/distinct_filter.dart';

@Injectable()
class MemberController {
  String selectProduct;
  List products = [
    {'id': '0101', 'name': 'product1', 'grp': 'Group-A', "chk": true},
    {'id': '0102', 'name': 'product2', 'grp': 'Group-A', "chk": true},
    {'id': '0103', 'name': 'product3', 'grp': 'Group-A', "chk": false},
    {'id': '0201', 'name': 'product4', 'grp': 'Group-B', "chk": true},
    {'id': '0202', 'name': 'product5', 'grp': 'Group-B', "chk": false}
  ];
  MemberController() {
  }
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
    bind(CheckmarkFilter);
    bind(DistinctFilter);
  }
}

main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(checkmark_filter.dart)
library WpDartExample.checkmark_filter;

import 'package:angular/angular.dart';

@Formatter(name: 'checkmarkfilter')
class CheckmarkFilter {
  String call(input) {
    return input ? '\u2713' : '';
  }
}

(distinct_filter.dart)
library WpDartExample.distinct_filter;

import 'package:angular/angular.dart';

@Formatter(name: 'distinctfilter')
class DistinctFilter {
  List call(data, keyName) {
    if (data is Iterable && keyName is String) {
      List results = new List();
      Map keys = new Map();
      for (var i = 0; i < data.length; i++) {
        var val = data[i][keyName];
        if (keys[val] == null) {
          keys[val] = true;
          results.add(data[i]);
        }
      }
      return results;
    }
    return const [];
  }
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

12. Pagination




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularDart Sample</title>
    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <script src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div ng-cloak ng-app member-controller>

<form class="form-inline">
  <div class="form-group">
    <label>Page Size:</label>
    <input ng-model="itemsPerPage" type="number"">
  </div>
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th><th>Name</th><th>Group</th><th>Check</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products | offsetfilter: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.grp}}</td>
      <td>{{item.chk}}</td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="4">
      <ul class="pagination">
        <li ng-class="prevPageDisabled()">
          <a href="#" ng-click="prevPage()"><< Prev</a>
        </li>
        <li ng-repeat="n in range()"  ng-class="{active: n == currentPage}" ng-click="setPage(n)">
          <a href="#">{{n}}</a>
        </li>
        <li ng-class="nextPageDisabled()">
          <a href="#" ng-click="nextPage()">Next >></a>
        </li>
      </ul>
    </td>
  </tfoot>
</table>

  </div>
</body>
</html>


(main.dart)
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:WpDartExample/formatter/checkmark_filter.dart';
import 'package:WpDartExample/formatter/distinct_filter.dart';

@Injectable()
class MemberController {
  int maxPage;
  int itemsPerPage = 3;
  int currentPage = 1;
  var pageRange = new List();
  List products = [
    {'id': '0101', 'name': 'product1', 'grp': 'Group-A', "chk": true},
    {'id': '0102', 'name': 'product2', 'grp': 'Group-A', "chk": true},
      :
  ];
  
  List range() {
    maxPage = (products.length/itemsPerPage).ceil();
    pageRange.clear();
    for (var i = 1; i <= maxPage; i++) {
      pageRange.add(i);
    }
    return pageRange;
  }

  void setPage(n) {
    currentPage = n;
  }
  
  void prevPage() {
    if (currentPage > 1) {
      currentPage--;
    }
  }
  
  void nextPage() {
    if (currentPage < maxPage) {
      currentPage++;
    }
  }
  
  String prevPageDisabled() {
    return currentPage == 1 ? "disabled" : "";
  }

  String nextPageDisabled() {
    return currentPage == maxPage ? "disabled" : "";
  }
  MemberController() {
  }
 
class MemberModule extends Module {
  MemberModule() {
    bind(MemberController);
    bind(CheckmarkFilter);
    bind(DistinctFilter);
  }
}

main() {
  applicationFactory()
    .addModule(new MemberModule())
    .rootContextType(MemberController)
    .run();
}

(offset_filter.dart)
library WpDartExample.offset_filter;

import 'package:angular/angular.dart';

@Formatter(name: 'offsetfilter')
class OffsetFilter {
  List call(data, start) {
    if (data is Iterable && start is int) {
      return data.sublist(start);
    }
    return const [];
  }
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.4 <0.7.0'
transformers:
- angular

13. Service




(main_demo.html)
<button ng-click="open('Component-A')">Component-A</button>
<button ng-click="open('Component-B')">Component-B</button>
<div ng-switch="tab">
  <div ng-switch-when="Component-A">
    <strong>Component-A</strong>
    <log-demo msg="'This is Componetnt-A'"></log-demo>
  </div>
  <div ng-switch-when="Component-B">
    <strong>Component-B</strong>
    <log-demo msg="'This is Componetnt-B'"></log-demo>
  </div>
</div>

(log_demo.html)
<ul>
  <li ng-repeat="item in logs">
    {{item.id}}=>{{item.msg}}
  </li>
</ul>
<button ng-click="add_s()">Write a log</button>


(main.dart)
library WpDartExample;
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

import 'package:WpDartExample/services/log_service.dart';
import 'package:WpDartExample/component/main_demo.dart';
import 'package:WpDartExample/component/log_demo.dart';

class MyAppModule extends Module {
  MyAppModule() {
    bind(LogService);
    bind(MainDemoComponent);
    bind(LogDemoComponent);
  }
}
void main() {
  applicationFactory()
      .addModule(new MyAppModule())
      .run();
}

(log_service.dart)
library WpDartExample.log_service;

import 'package:angular/angular.dart';

@Injectable()
class LogService {
  List<Map> logs;
  int LogCount;
  LogService() {
    logs = new List();
    LogCount = 0;
  } 
  List add(msg) {
    Map log = new Map();
    log["id"] = ++LogCount;
    log["msg"] = msg;
    logs.add(log);
    return logs;
  }
}

(main_demo.dart)
library WpDartExample.main;

import 'package:angular/angular.dart';

@Component(
  selector: 'main-demo',
  templateUrl: 'main_demo.html',
  useShadowDom: false)
class MainDemoComponent {
  String tab = "Component-A";
  void open(input) {
    tab = input;
  }
}

(log_demo.dart)
library WpDartExample.log;

import 'package:angular/angular.dart';
import 'package:WpDartExample/services/log_service.dart';

@Component(
  selector: 'log-demo',
  templateUrl: 'log_demo.html',
  useShadowDom: false)
  class LogDemoComponent {
  @NgTwoWay('msg')
  String msg;

  LogService ls;
  List<Map> logs = new List();
    
  LogDemoComponent(this.ls) {
  }

  void add_s() {
    logs = ls.add(msg);
  }
}


(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.8 <0.7.0'
transformers:
- angular:
    html_files:
      - lib/component/main_demo.html
      - lib/component/log_demo.html

14. Http service, Read from a JSON-encoded file




(httpjson_demo.html)
<button ng-click="getFriends(true)">Success</button>
 <button ng-click="getFriends(false)">Error</button><br />
<strong>Response Status,Header</strong><br />
<textarea class="form-control" rows="5">{{getFriendsResult}}</textarea>
<strong>Response Data</strong><br />
    <table class="table table-striped">
  <thead>
    <tr>
      <th>No</th><th>Name</th><th>Age</th><th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends" >
      <td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.address}}</td>
    </tr>
  </tbody>
</table>


(main.dart)
library WpDartExample;
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

import 'package:WpDartExample/services/httpjson_demo.dart';

class MyAppModule extends Module {
  MyAppModule() {
    bind(HttpjsonDemoComponent);
  }
}
void main() {
  applicationFactory()
      .addModule(new MyAppModule())
      .run();
}

(httpjson_demo.dart)
library WpDartExample.httpjson;

import 'package:angular/angular.dart';
import 'dart:async' show Future;

@Component(
  selector: 'httpjson-demo',
  templateUrl: 'httpjson_demo.html',
  useShadowDom: false)
class HttpjsonDemoComponent {
  final Http _http;
  List<Map> friends = [];
  String svrURL;
  String getFriendsResult;
  HttpjsonDemoComponent(this._http) {
  }
  
  Future getFriends(bool tf) {
    svrURL = tf ? "friends.json" : "invalid-url";
    return _http.get(svrURL)
              .then((HttpResponse response) {
                friends = response.data;
                getFriendsResult = "status: " + response.status.toString() + "\n" +
                                   "headers: " + response.config.headers.toString();
              })
              .catchError((e) {
                friends = [];
                getFriendsResult = "status: " + e.status.toString() + "\n" +
                                   "contents: " + e.data;
              });
  }
}


(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.8 <0.7.0'
transformers:
- angular:
    html_files:
      - lib/component/httpjson_demo.html

15. Http service, POST, Interceptor




(httppost_demo.html)
<span>Sending Data</span><br />
<span>{{send_data}}</span><br />
<strong>1.AngularJS Default(json)</strong><br />
<button ng-click="postCall(false)">Send</button><br />
<strong>2.Using Interceptor(x-www-form-urlencoded)</strong><br />
<button ng-click="postCall(true)">Send</button><br />
<textarea class="form-control" rows="3">{{postCallResult}}</textarea>


(main.dart)
library WpDartExample;
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

import 'package:WpDartExample/services/httppost_demo.dart';

class MyAppModule extends Module {
  MyAppModule() {
    bind(HttppostDemoComponent);
  }
}
void main() {
  applicationFactory()
      .addModule(new MyAppModule())
      .run();
}

(httppost_demo.dart)
library WpDartExample.httppost;

import 'package:angular/angular.dart';
import 'dart:async' show Future;

@Component(
  selector: 'httppost-demo',
  templateUrl: 'httppost_demo.html',
//  exportExpressions: const ['friends'],
  useShadowDom: false)
class HttppostDemoComponent {
  final Http _http;
  Map send_data = {
                    "id": "0101",
                    "name": "Tom"
                  };
  String svrURL = "http_server.php";
  String postCallResult;
  Map headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
  HttpInterceptor intercept;
  HttpResponseConfig transRequest(HttpResponseConfig config) {
    String transStr = "";
    if (config.data != null) {
      config.data.forEach((k, v) {
        if (transStr.isNotEmpty) {
          transStr += '&' + k + '=' + v;
        } else {
          transStr = k + '=' + v;
        }
      });
    }
    config.data = transStr;
    return config;
  }

  HttppostDemoComponent(this._http) {
    RequestInterceptor reqint = transRequest;
    intercept = new HttpInterceptor();
    intercept.request = reqint;
  }
  
  Future postCall(bool tf) {
    if(!tf) {
      return _http.post(svrURL,send_data)
                .then((HttpResponse response) {
                  postCallResult = "status: " + response.status.toString() + "\n" +
                                     "Sending Data: " + response.data + "\n" +
                                     "headers: " + response.config.headers.toString();
                })
                .catchError((e) {
                  postCallResult = "status: " + e.status.toString() + "\n" +
                                     "contents: " + e.data;
                });
    } else {
      return _http.post(svrURL,send_data,headers:headers,interceptors:intercept)
                .then((HttpResponse response) {
                  postCallResult = "status: " + response.status.toString() + "\n" +
                                     "Sending Data: " + response.data + "\n" +
                                     "headers: " + response.config.headers.toString();
                })
                .catchError((e) {
                  postCallResult = "status: " + e.status.toString() + "\n" +
                                     "contents: " + e.data;
                });
    };
  }
}


(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.8 <0.7.0'
transformers:
- angular:
    html_files:
      - lib/component/httppost_demo.html

16. Router, RESTful




(users_demo.html)
<a class="btn btn-primary" href="#/users/main" role="button">To REST APP</a><br />
<ng-view></ng-view><br />

(view/user_main.html)
<a class="btn btn-primary" href="#/users/new">User Create</a>
<a class="btn btn-primary" href="#/users">User Index</a>

(component/user_index.html)
<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 ng-repeat="item in users">
      <td>{{item.id}}</td>
      <td>{{item.firstName}}</td>
      <td>{{item.lastName}}</td>
      <td>
        <a class="btn btn-primary" href="#/users/{{item.id}}" role="button">Detail</a>
        <button class="btn btn-primary" ng-click="destroy(item.id)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>
<strong>Reuslt</strong><br />
<span>{{Result}}</span><br />
<a class="btn btn-primary" href="#/users/main" role="button">Back</a>

(component/user_show.html)
<div class="panel panel-default">
  <div class="panel-heading">User Detail</div>
  <div class="panel-body">
    <ul>
      <li>ID:{{user.id}}</li>
      <li>FirstName:{{user.firstName}}</li>
      <li>LastName:{{user.lastName}}</li>
      <li>Address:{{user.address}}</li>
      <li>Age:{{user.age}}</li>
    </ul>
    <a class="btn btn-primary" href="#/users/{{user.id}}/edit" role="button">User Edit</a>
    <a class="btn btn-primary" href="#/users/main" role="button">Back</a><br />
  </div>
</div>

(component/user_new.html)
<div class="panel panel-default">
  <div class="panel-heading">User Create</div>
  <div class="panel-body">
    <span>New User Info</span><br />
    <ul>
      <li>FirstName:{{new_data.firstName}}</li>
      <li>LastName:{{new_data.lastName}}</li>
      <li>Address:{{new_data.address}}</li>
      <li>Age:{{new_data.age}}</li>
    </ul>
    <button class="btn btn-primary" ng-click="create()">Create</button>
    <a class="btn btn-primary" href="#/users/main" role="button">Back</a><br />
    <strong>Result</strong><br />
    <span>{{Result}}</span><br />
  </div>
</div>

(component/user_edit.html)
<div class="panel panel-default">
  <div class="panel-heading">User Edit</div>
  <div class="panel-body">
    <span>User Edit info</span><br />
    <ul>
      <li>FirstName:{{user.firstName}}</li>
      <li>LastName:{{user.lastName}}</li>
      <li>Address:{{user.address}}</li>
      <li>Age:{{user.age}}</li>
    </ul>
    <button class="btn btn-primary" ng-click="update(user)">Update</button>
    <a class="btn btn-primary" href="#/users/main" role="button">Back</a><br />
    <strong>Result</strong><br />
    <span>{{Result}}</span><br />
  </div>
</div>


(main.dart)
library WpDartExample;
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

import 'package:WpDartExample/component/users_demo.dart';
import 'package:WpDartExample/component/userindex_demo.dart';
import 'package:WpDartExample/component/usershow_demo.dart';
import 'package:WpDartExample/component/useredit_demo.dart';
import 'package:WpDartExample/component/usernew_demo.dart';
import 'package:WpDartExample/routing/router_demo.dart';

class MyAppModule extends Module {
  MyAppModule() {
    bind(UsersDemoComponent);
    bind(UserindexDemoComponent);
    bind(UsershowDemoComponent);
    bind(UsereditDemoComponent);
    bind(UsernewDemoComponent);
    bind(RouteInitializerFn, toValue: RouterDemoInitializer);
    bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
  }
}
void main() {
  applicationFactory()
      .addModule(new MyAppModule())
      .run();
}

(router_demo.dart)
library WpDartExample.router;

import 'package:angular/angular.dart';

void RouterDemoInitializer(Router router, RouteViewFactory views) {
  views.configure({
    'users': ngRoute(
      path: '/users',
      viewHtml: '<userindex-demo></userindex-demo>'),
    'main': ngRoute(
      path: '/users/main',
      view: 'view/user_main.html'),
    'new': ngRoute(
      path: '/users/new',
      viewHtml: '<usernew-demo></usernew-demo>'),
    'show': ngRoute(
      path: '/users/:id',
      viewHtml: '<usershow-demo></usershow-demo>'),
    'edit': ngRoute(
      path: '/users/:id/edit',
      viewHtml: '<useredit-demo></useredit-demo>'),
//    'users_default': ngRoute(
//      defaultRoute: true,
//      enter: (RouteEnterEvent e) =>
//                router.go('main', {},
//                  replace: true)
//      )
  });
}

(users_demo.dart)
library WpDartExample.users;

import 'package:angular/angular.dart';

@Component(
  selector: 'users-demo',
  templateUrl: 'users_demo.html',
  useShadowDom: false)
class UsersDemoComponent {
}

(userindex_demo.dart)
library WpDartExample.userindex;

import 'package:angular/angular.dart';

@Component(
  selector: 'userindex-demo',
  templateUrl: 'userindex_demo.html',
  useShadowDom: false)
class UserindexDemoComponent {
  final Http _http;
  List<Map> users = [];
  String svrURL;
  String Result;
  UserindexDemoComponent(this._http) {
    _getusers();
  }
  
  void _getusers() {
    svrURL = "/rest/users/";
    _http.get(svrURL)
      .then((HttpResponse response) {
        users = response.data;
        Result = "status: " + response.status.toString() + "\n" +
                 "headers: " + response.config.headers.toString();
      })
      .catchError((e) {
        users = [];
        Result = "status: " + e.status.toString() + "\n" +
                 "contents: " + e.data;
      });
  }
  void destroy(id) {
    svrURL = "/rest/users/" + id.toString();
    _http.delete(svrURL)
      .then((HttpResponse response) {
        Result = "User(id: " + id.toString() + ")Delete Complete.Index is not updated because of a test purpose";
      })
      .catchError((e) {
        users = [];
        Result = "status: " + e.status.toString() + "\n" +
                 "contents: " + e.data;
      });
  }
}

(usershow_demo.dart)
library WpDartExample.usershow;

import 'package:angular/angular.dart';

@Component(
  selector: 'usershow-demo',
  templateUrl: 'usershow_demo.html',
  useShadowDom: false)
class UsershowDemoComponent {
  final Http _http;
  Map user = {};
  String _id;
  String svrURL;
  String Result;
  UsershowDemoComponent(this._http,RouteProvider routeProvider) {
    _id = routeProvider.parameters['id'];
    _getuser(_id);
  }
  
  void _getuser(id) {
    svrURL = "/rest/users/" + id ;
    _http.get(svrURL)
      .then((HttpResponse response) {
        user = response.data;
        Result = "status: " + response.status.toString() + "\n" +
                 "headers: " + response.config.headers.toString();
      })
      .catchError((e) {
        user = {};
        Result = "status: " + e.status.toString() + "\n" +
                 "contents: " + e.data;
      });
  }
}

(usernew_demo.dart)
library WpDartExample.usernew;

import 'package:angular/angular.dart';
import 'dart:async' show Future;

@Component(
  selector: 'usernew-demo',
  templateUrl: 'usernew_demo.html',
  useShadowDom: false)
class UsernewDemoComponent {
  final Http _http;
  Map new_data = {
    "firstName": "first4_new",
    "lastName": "last4_new",
    "address": "address4_new",
    "age": "age4_new"
  };
  String svrURL;
  String Result;
  UsernewDemoComponent(this._http) {
  }
  
  Future create() {
    svrURL = "/rest/users/";
    return _http.post(svrURL,new_data)
             .then((HttpResponse response) {
               Result = "User Create Complete.";
             })
             .catchError((e) {
               Result = "status: " + e.status.toString() + "\n" +
                                "contents: " + e.data;
             });
  }
}

(useredit_demo.dart)
library WpDartExample.useredit;

import 'package:angular/angular.dart';
import 'dart:async' show Future;

@Component(
  selector: 'useredit-demo',
  templateUrl: 'useredit_demo.html',
  useShadowDom: false)
class UsereditDemoComponent {
  final Http _http;
  Map user = {};
  String _id;
  String svrURL;
  String Result;
  UsereditDemoComponent(this._http,RouteProvider routeProvider) {
    _id = routeProvider.parameters['id'];
    _getuser(_id);
  }
  
  void _getuser(id) {
    svrURL = "/rest/users/" + id ;
    _http.get(svrURL)
      .then((HttpResponse response) {
        user = response.data;
        user["firstName"] += "_rev";
        user["lastName"] += "_rev";
        user["address"] += "_rev";
        user["age"] += "_rev";
      })
      .catchError((e) {
        user = {};
        Result = "status: " + e.status.toString() + "\n" +
                 "contents: " + e.data;
      });
  }
  Future update(user) {
    svrURL = "/rest/users/" + _id;
    return _http.put(svrURL,user)
             .then((HttpResponse response) {
               Result = "User(id: " + _id + ")Update Complete.";
             })
             .catchError((e) {
               Result = "status: " + e.status.toString() + "\n" +
                                "contents: " + e.data;
             });
  }
}

(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.8 <0.7.0'
transformers:
- angular:
    html_files:
      - lib/component/users_demo.html
      - lib/component/userindex_demo.html
      - lib/component/usershow_demo.html
      - lib/component/useredit_demo.html
      - lib/component/usernew_demo.html