Merge pull request #23 from vsavkin/angulardart10

update angular

lib/components/agenda.html

@@ -2,17 +2,17 @@ <h3>Call Agenda</h3>
 
 <form class="input-group">
   <div class="agenda-item-input">
-    <input type="agenda-item" class="form-control" ng-model="ctrl.newAgendaItem"/>
-    <div class="hint" ng-if="ctrl.valid">
-      {{ctrl.newAgendaItem.description}}, Priority: {{ctrl.newAgendaItem.priority}}
+    <input type="agenda-item" class="form-control" ng-model="newAgendaItem"/>
+    <div class="hint" ng-if="valid">
+      {{newAgendaItem.description}}, Priority: {{newAgendaItem.priority}}
     </div>
   </div>
 
   <span class="input-group-btn">
-    <button type="submit" class="btn btn-default" ng-click="ctrl.addItem()" ng-disabled="!ctrl.valid">
+    <button type="submit" class="btn btn-default" ng-click="addItem()" ng-disabled="!valid">
       <span class="glyphicon glyphicon-plus"></span>
     </button>
   </span>
 </form>
 
-<agenda-item ng-repeat="item in ctrl.model | orderBy: extPriority" item="item" agenda="ctrl"></agenda-item>
+<agenda-item ng-repeat="item in model | orderBy: 'extPriority'" item="item"></agenda-item>

lib/components/agenda_component.dart

@@ -3,8 +3,8 @@ part of talk_to_me;
 @Component(
     selector: 'agenda',
     templateUrl: 'lib/components/agenda.html',
-    publishAs: 'ctrl',
-    useShadowDom: false
+    useShadowDom: false,
+    exportExpressions: const ['extPriority']
 )
 class AgendaComponent {
   @NgOneWayOneTime("checkable")

lib/components/agenda_item.html

@@ -1,38 +1,38 @@
-<div ng-if="ctrl.isShow" ng-class="{done: ctrl.item.done}">
+<div ng-if="isShow" ng-class="{done: item.done}">
   <div class="input-group">
-    <span class="priority-indicator priority-{{ctrl.item.priority}}"></span>
+    <span class="priority-indicator priority-{{item.priority}}"></span>
 
-    <input type="checkbox" ng-model="ctrl.item.done" ng-if="ctrl.checkable"/>
+    <input type="checkbox" ng-model="item.done" ng-if="checkable"/>
 
-    {{ctrl.item.description}}
+    {{item.description}}
 
     <span class="input-group-btn">
-      <button class="btn btn-default switch-to-edit" ng-click="ctrl.switchToEdit()">
+      <button class="btn btn-default switch-to-edit" ng-click="switchToEdit()">
         <span class="glyphicon glyphicon-edit"></span>
       </button>
 
-      <button class="btn btn-default" ng-click="ctrl.delete()">
+      <button class="btn btn-default" ng-click="delete()">
         <span class="glyphicon glyphicon-trash"></span>
       </button>
     </span>
   </div>
 </div>
 
-<div ng-if="ctrl.isEdit">
+<div ng-if="isEdit">
   <form class="input-group">
     <div class="agenda-item-input">
-      <input type="agenda-item" class="form-control" ng-model="ctrl.editItem"/>
-      <div class="hint" ng-if="ctrl.editItem.valid">
-        {{ctrl.editItem.description}}, Priority: {{ctrl.editItem.priority}}
+      <input type="agenda-item" class="form-control" ng-model="editItem"/>
+      <div class="hint" ng-if="editItem.valid">
+        {{editItem.description}}, Priority: {{editItem.priority}}
       </div>
     </div>
 
     <span class="input-group-btn">
-      <button class="btn btn-default" ng-click="ctrl.save()" type="submit" ng-disabled="!ctrl.valid">
+      <button class="btn btn-default" ng-click="save()" type="submit" ng-disabled="!valid">
         <span class="glyphicon glyphicon-floppy-disk"></span>
       </button>
 
-      <button class="btn btn-default" ng-click="ctrl.cancel()" type="reset">
+      <button class="btn btn-default" ng-click="cancel()" type="reset">
         <span class="glyphicon glyphicon-ban-circle"></span>
       </button>
     </span>

lib/components/agenda_item_component.dart

@@ -3,11 +3,9 @@ part of talk_to_me;
 @Component(
     selector: 'agenda-item',
     templateUrl: 'lib/components/agenda_item.html',
-    useShadowDom: false,
-    publishAs: 'ctrl'
+    useShadowDom: false
 )
 class AgendaItemComponent {
-  @NgOneWayOneTime("agenda")
   AgendaComponent agenda;
 
   @NgTwoWay("item")
@@ -19,6 +17,8 @@ class AgendaItemComponent {
   bool get isShow => mode == "show";
   bool get isEdit => mode == "edit";
 
+  AgendaItemComponent(this.agenda);
+
   switchToEdit() {
     editItem = item;
     mode = "edit";
@@ -41,5 +41,7 @@ class AgendaItemComponent {
 
   bool get valid => editItem.valid;
 
-  bool get checkable => agenda.checkable;
+  bool get checkable {
+    return agenda.checkable;
+  }
 }

lib/components/call.html

@@ -1,23 +1,23 @@
 <div class="row call-row">
-  <toggle toggle-property="ctrl.open" ng-class="{'open': ctrl.open}">
+  <toggle toggle-property="open" ng-class="{'open': open}">
     <when-closed>
-      <div ng-if="ctrl.isOnline">
-        <button class="btn btn-default" ng-click="ctrl.open = true">
+      <div ng-if="isOnline">
+        <button class="btn btn-default" ng-click="open = true">
           <span class="glyphicon glyphicon-earphone"></span> Call
         </button>
       </div>
 
-      <div ng-if="!ctrl.isOnline">
-        {{ctrl.model.name}} is Offline
+      <div ng-if="!isOnline">
+        {{model.name}} is Offline
       </div>
     </when-closed>
 
     <when-open>
-      <video ng-src="{{ctrl.videoSrc}}" width="213" height="161" autoplay="autoplay" class="video-box"></video>
+      <video ng-src="{{videoSrc}}" width="213" height="161" autoplay="autoplay" class="video-box"></video>
       <span class="glyphicon glyphicon-transfer video-box-transfer"></span>
       <img src="images/cat.jpg" class="video-box">
 
-      <button class="btn btn-default" ng-click="ctrl.open = false">
+      <button class="btn btn-default" ng-click="open = false">
         <span class="glyphicon glyphicon-phone-alt"></span> Hang up
       </button>
     </when-open>

lib/components/call_component.dart

@@ -3,7 +3,6 @@ part of talk_to_me;
 @Component(
     selector: 'call',
     templateUrl: 'lib/components/call.html',
-    publishAs: 'ctrl',
     useShadowDom: false
 )
 class CallComponent implements AttachAware {

lib/components/create_call.html

@@ -6,15 +6,15 @@ <h2>Create a Call</h2>
   <form name="createForm">
     <div class="row">
       <h3>Name</h3>
-      <input class="form-control" type="text" ng-model="ctrl.call.name" ng-required="true">
+      <input class="form-control" type="text" ng-model="call.name" ng-required="true">
     </div>
 
     <div class="row">
-      <agenda model="ctrl.call.agenda" checkable="false"></agenda>
+      <agenda model="call.agenda" checkable="false"></agenda>
     </div>
 
     <div class="row create-row">
-      <button class="btn btn-primary btn-block" type="submit" ng-click="ctrl.create()" ng-disabled="createForm.invalid">Create</button>
+      <button class="btn btn-primary btn-block" type="submit" ng-click="create()" ng-disabled="createForm.invalid">Create</button>
     </div>
   </form>
 </div>

lib/components/create_call_component.dart

@@ -2,14 +2,14 @@ part of talk_to_me;
 
 @Component(
     selector: 'create-call',
-    publishAs: 'ctrl',
     templateUrl: 'lib/components/create_call.html',
     useShadowDom: false
 )
 class CreateCallComponent {
   Call call = new Call();
   CallStorage storage;
   Router router;
+  NgForm createForm;
 
   CreateCallComponent(this.storage, this.router);
 

lib/components/global_alert.html

@@ -1,6 +1,6 @@
-<div ng-if="ctrl.message != null">
+<div ng-if="message != null">
   <div class="overlay"></div>
 
-  <div class="message alert alert-danger" ng-bind-html="ctrl.message">
+  <div class="message alert alert-danger" ng-bind-html="message">
   </div>
 </div>

lib/components/global_alert_component.dart

@@ -3,13 +3,12 @@ part of talk_to_me;
 @Component(
     selector: 'global-alert',
     templateUrl: 'lib/components/global_alert.html',
-    publishAs: 'ctrl',
     useShadowDom: false
 )
-class GlobalAlertComponent {
+class GlobalAlertComponent implements ScopeAware {
   String message;
 
-  GlobalAlertComponent(Scope scope) {
+  void set scope(Scope scope) {
     scope.on("globalAlert").listen(this._showMessage);
   }
 

lib/components/list_calls.html

@@ -9,17 +9,17 @@ <h2>Calls</h2>
   </div>
 
   <ul>
-    <li ng-repeat="call in ctrl.calls | orderBy: 'name'" ng-class="{'selected' : ctrl.isSelected(call)}">
+    <li ng-repeat="call in calls | orderBy: 'name'" ng-class="{'selected' : isSelected(call)}">
       <a href="#/list/{{call.id}}/show">{{call.name}}</a>
     </li>
   </ul>
 </div>
 
 <div class="col-md-8">
-  <div ng-if="ctrl.isAnySelected">
+  <div ng-if="isAnySelected">
     <ng-view></ng-view>
   </div>
-  <div ng-if="!ctrl.isAnySelected" class="empty-call">
+  <div ng-if="!isAnySelected" class="empty-call">
     No calls are selected.
   </div>
 </div>

lib/components/list_calls_component.dart

@@ -2,7 +2,6 @@ part of talk_to_me;
 
 @Component(
     selector: 'list',
-    publishAs: 'ctrl',
     templateUrl: 'lib/components/list_calls.html',
     useShadowDom: false
 )

lib/components/show_call.html

@@ -1,2 +1,2 @@
-<call model="ctrl.call" is-online="ctrl.userIsOnline"></call>
-<agenda model="ctrl.call.agenda" checkable="true"></agenda>
+<call model="call" is-online="userIsOnline"></call>
+<agenda model="call.agenda" checkable="true"></agenda>

lib/components/show_call_component.dart

@@ -2,21 +2,23 @@ part of talk_to_me;
 
 @Component(
     selector: "show-call",
-    publishAs: "ctrl",
     exportExpressions: const ['watchExp'],
     templateUrl: 'lib/components/show_call.html',
     useShadowDom: false
 )
-class ShowCallComponent {
+class ShowCallComponent implements ScopeAware {
   Call call;
   CallStorage storage;
   CallSerializer serializer;
   bool userIsOnline = false;
 
   ShowCallComponent(this.storage, this.serializer, RouteProvider routeProvider,
-      Scope scope, UsersRepository repo){
+      UsersRepository repo){
     call = storage.find(_callId(routeProvider));
     _checkIfOnline(call.name, repo.all());
+  }
+
+  void set scope(Scope scope) {
     scope.watch("watchExp()", _store, context: this);
   }
 

lib/decorators/toggle.dart

@@ -17,7 +17,7 @@ class Toggle implements AttachAware {
     whenOpen.hidden = true;
     whenClosed.hidden = true;
 
-    scope.watch("ctrl.open", (newValue, _) {
+    scope.watch("open", (newValue, _) {
       if(newValue) {
         whenOpen.hidden = false;
         whenClosed.hidden = true;

lib/talk_to_me.dart

@@ -57,6 +57,7 @@ class TalkToMeApp extends Module {
     bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
 
     bind(UrlRewriter, toImplementation: TalkToMeUrlRewriter);
+    bind(ResourceResolverConfig, toValue: new ResourceResolverConfig.resolveRelativeUrls(false));
 
     install(new AnimationModule());
   }

pubspec.lock

@@ -4,11 +4,11 @@ packages:
   analyzer:
     description: analyzer
     source: hosted
-    version: "0.18.0"
+    version: "0.15.7"
   angular:
     description: angular
     source: hosted
-    version: "0.13.0"
+    version: "1.0.0"
   args:
     description: args
     source: hosted
@@ -48,7 +48,7 @@ packages:
   di:
     description: di
     source: hosted
-    version: "2.0.2"
+    version: "3.3.2"
   fixnum:
     description: fixnum
     source: hosted
@@ -81,6 +81,10 @@ packages:
     description: mock
     source: hosted
     version: "0.11.0+2"
+  observe:
+    description: observe
+    source: hosted
+    version: "0.10.1+2"
   path:
     description: path
     source: hosted
@@ -92,7 +96,11 @@ packages:
   route_hierarchical:
     description: route_hierarchical
     source: hosted
-    version: "0.4.22"
+    version: "0.5.0"
+  smoke:
+    description: smoke
+    source: hosted
+    version: "0.1.0+1"
   source_maps:
     description: source_maps
     source: hosted
@@ -105,10 +113,6 @@ packages:
     description: stack_trace
     source: hosted
     version: "0.9.3+2"
-  typed_mock:
-    description: typed_mock
-    source: hosted
-    version: "0.0.4"
   unittest:
     description: unittest
     source: hosted
@@ -121,7 +125,3 @@ packages:
     description: uuid
     source: hosted
     version: "0.3.2"
-  web_components:
-    description: web_components
-    source: hosted
-    version: "0.3.5+1"

pubspec.yaml

@@ -2,7 +2,7 @@ name: talk_to_me
 description: A sample web application built using AngularDart
 dependencies:
   browser: ">=0.10.0+2 <0.11.0"
-  angular: ">=0.13.0 <0.14.0"
+  angular: ">=1.0.0 <2.0.0"
   uuid: ">=0.1.6 <=1.0.0"
 dev_dependencies:
   dartmocks: ">= 0.5.0"