refactor(1.x): remove need for router-component directive

This is a huge refactor that makes the bindings for 1.x a bit more idiomatic Closes angular#46 Closes angular#36
adam77 · Feb 10, 2015 · c2ccbfc · c2ccbfc
1 parent ecc7584
commit c2ccbfc
Show file tree

Hide file tree

Showing 19 changed files with 265 additions and 408 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -13,6 +13,8 @@ Please check existing issues and PRs (including ones that have already been clos
 That being said, all forms of feedback are welcome: bug reports, feature requests, use cases, and questions.
 
 ### GitHub Labels
+Most of the use cases are self-explanatory, so they are omitted.
+
 * [pair](https://github.com/angular/router/labels/pair) - issues that @btford wants to use or pairing with other Angular Core team members to get feedback.
 * [`type: use case`](https://github.com/angular/router/labels/type%3A%20use%20case) - issues that describe a common usage scenario.
   Should be closed by adding an example to `examples/angular-1/`, complete with docs and an e2e test.

diff --git a/config/karma.sauce.conf.js b/config/karma.sauce.conf.js
@@ -6,7 +6,7 @@ var CUSTOM_LAUNCHERS = {
   'SL_Chrome': {
     base: 'SauceLabs',
     browserName: 'chrome',
-    version: '35'
+    version: '39'
   },
   'SL_Firefox': {
     base: 'SauceLabs',

diff --git a/docs/content/lifecycle.md b/docs/content/lifecycle.md
@@ -201,7 +201,9 @@ digraph G {
     "newCtrl.activate()" [fillcolor=lightsalmon];
   }
 
-  "begin navigation"         -> "oldCtrl.canDeactivate()";
+  "begin navigation"         -> "oldCtrl.canReuse()";
+  "oldCtrl.canReuse()"       -> "oldCtrl.reuse()"          [label=true];
+  "oldCtrl.canReuse()"       -> "oldCtrl.canDeactivate()";
   "oldCtrl.canDeactivate()"  -> "newCtrl = new Ctrl()"     [label="true", weight=10, fontcolor=darkgreen];
   "oldCtrl.canDeactivate()"  -> "cancel navigation"        [fontcolor=red];
 
@@ -217,7 +219,7 @@ digraph G {
   "newCtrl.activate()"       -> "complete navigation"      [weight=10];
   "newCtrl.activate()"       -> "cancel navigation";
 
-  { rank=same; "complete navigation"; "cancel navigation"; }
+  { rank=same; "complete navigation"; "cancel navigation"; "oldCtrl.reuse()" }
 }
 ```
 

diff --git a/examples/angular-1/animation/index.html b/examples/angular-1/animation/index.html
@@ -6,9 +6,26 @@
   <link rel="stylesheet" href="./components/app/app.css">
   <title>Routing</title>
 </head>
-<body ng-app="example">
+<body ng-app="example" ng-controller="AppController">
+  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <div class="collapse navbar-collapse">
+      <ul class="nav navbar-nav">
+        <li><a router-link="welcome">welcome</a></li>
+        <li><a router-link="goodbye">goodbye</a></li>
+      </ul>
+
+      <ul class="nav navbar-nav navbar-right">
+        <li class="loader" ng-if="router.isNavigating">
+          <i class="fa fa-spinner fa-spin fa-2x"></i>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+  <div class="page-host">
+    <router-view-port></router-view-port>
+  </div>
 
-  <router-component component-name="app"></router-component>
 
   <script src="/node_modules/angular/angular.js"></script>
   <script src="/node_modules/angular-animate/angular-animate.js"></script>

diff --git a/...les/angular-1/hello/components/app/app.js → examples/angular-1/hello/app.js b/...les/angular-1/hello/components/app/app.js → examples/angular-1/hello/app.js
@@ -10,7 +10,7 @@ angular.module('example', [
 
 function AppController(router) {
   router.config([
-    { path: '/',              component: 'welcome' },
+    { path: '/',              redirectTo: '/welcome' },
     { path: '/welcome',       component: 'welcome' },
     { path: '/flickr',        component: 'flickr' },
     { path: '/settings',      component: 'settings' }

diff --git a/examples/angular-1/hello/components/app/app.html b/examples/angular-1/hello/components/app/app.html
diff --git a/examples/angular-1/hello/components/settings/settings.js b/examples/angular-1/hello/components/settings/settings.js
@@ -8,9 +8,8 @@ function SettingsController(router) {
   this.router = router;
 
   router.config([
-    { path: '/',         component: 'welcome',  title:'Welcome' },
+    { path: '/',         redirectTo: '/welcome' },
     { path: '/welcome',  component: 'welcome',  title:'Welcome' },
-    { path: '/flickr',   component: 'flickr' },
-    { path: '/settings', component: 'settings', title:'Settings (What!?)' }
+    { path: '/flickr',   component: 'flickr' }
   ]);
 }
diff --git a/examples/angular-1/hello/index.html b/examples/angular-1/hello/index.html
@@ -11,16 +11,35 @@
 
   <title>Routing</title>
 </head>
-<body ng-app="example">
+<body ng-app="example" ng-controller="AppController">
 
-  <router-component component-name="app"></router-component>
+  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <div class="collapse navbar-collapse">
+      <ul class="nav navbar-nav">
+        <li><a router-link="flickr">flickr</a></li>
+        <li><a router-link="settings">settings</a></li>
+        <li><a router-link="welcome">welcome</a></li>
+      </ul>
+
+      <ul class="nav navbar-nav navbar-right">
+        <li class="loader" ng-if="router.isNavigating">
+          <i class="fa fa-spinner fa-spin fa-2x"></i>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+  <div class="page-host">
+    <router-view-port view-port-name="left"></router-view-port>
+    <router-view-port view-port-name="right"></router-view-port>
+  </div>
 
   <script src="/node_modules/angular/angular.js"></script>
   <script src="/dist/router.es5.js"></script>
 
-  <script src="components/app/app.js"></script>
-  <script src="components/flickr/flickr.js"></script>
-  <script src="components/settings/settings.js"></script>
-  <script src="components/welcome/welcome.js"></script>
+  <script src="./app.js"></script>
+  <script src="./components/flickr/flickr.js"></script>
+  <script src="./components/settings/settings.js"></script>
+  <script src="./components/welcome/welcome.js"></script>
 </body>
 </html>
diff --git a/...ular-1/phone-kitten/components/app/app.js → examples/angular-1/phone-kitten/app.js b/...ular-1/phone-kitten/components/app/app.js → examples/angular-1/phone-kitten/app.js
@@ -14,7 +14,8 @@ controller('AppController', ['router', AppController]);
 
 function AppController(router) {
   router.config([
-    { path: 'phones'          , component: 'phoneList'   },
-    { path: 'phones/:phoneId' , component: 'phoneDetail' }
+    { path: '/'               , redirectTo: '/phones'    },
+    { path: '/phones'          , component: 'phoneList'   },
+    { path: '/phones/:phoneId' , component: 'phoneDetail' }
   ]);
 }
diff --git a/examples/angular-1/phone-kitten/components/app/app.html b/examples/angular-1/phone-kitten/components/app/app.html
diff --git a/examples/angular-1/phone-kitten/index.html b/examples/angular-1/phone-kitten/index.html
@@ -15,16 +15,18 @@
   <script src="/node_modules/angular-animate/angular-animate.js"></script>
   <script src="/node_modules/angular-resource/angular-resource.js"></script>
 
-  <script src="components/app/app.js"></script>
-  <script src="components/phone-detail/phone-detail.js"></script>
-  <script src="components/phone-list/phone-list.js"></script>
+  <script src="./app.js"></script>
+  <script src="./components/phone-detail/phone-detail.js"></script>
+  <script src="./components/phone-list/phone-list.js"></script>
 
-  <script src="js/filters.js"></script>
-  <script src="js/services.js"></script>
+  <script src="./js/filters.js"></script>
+  <script src="./js/services.js"></script>
 </head>
-<body ng-app="phoneKitten">
+<body ng-app="phoneKitten" ng-controller="AppController">
+  <div class="view-container">
+    <div router-view-port class="view-frame"></div>
+  </div>
 
   <router-component component-name="app"></router-component>
-
 </body>
 </html>
diff --git a/...es/angular-1/wizard/components/app/app.js → examples/angular-1/wizard/app.js b/...es/angular-1/wizard/components/app/app.js → examples/angular-1/wizard/app.js
@@ -17,8 +17,6 @@ function AppController(router) {
     { path: '/three',  component: 'three' },
     { path: '/end',    component: 'end' }
   ]);
-
-  router.navigate('/');
 }
 
 

diff --git a/examples/angular-1/wizard/components/app/app.html b/examples/angular-1/wizard/components/app/app.html
diff --git a/examples/angular-1/wizard/components/two/two.js b/examples/angular-1/wizard/components/two/two.js
@@ -7,8 +7,5 @@ function TwoController(answers) {
 }
 
 TwoController.prototype.canActivate = function () {
-  if (!this.answers.name) {
-    return new Redirect('one');
-  }
-  return true;
+  return !!this.answers.name;
 };
diff --git a/examples/angular-1/wizard/index.html b/examples/angular-1/wizard/index.html
@@ -11,17 +11,19 @@
 
   <base href="/examples/angular-1/hello">
 </head>
-<body ng-app="myApp">
-  <router-component component-name="app"></router-component>
+<body ng-app="myApp" ng-controller="AppController">
+
+  <h1>hello</h1>
+  <router-view-port></router-view-port>
 
   <script src="/node_modules/angular/angular.js"></script>
   <script src="/dist/router.es5.js"></script>
 
-  <script src="components/app/app.js"></script>
-  <script src="components/intro/intro.js"></script>
-  <script src="components/one/one.js"></script>
-  <script src="components/two/two.js"></script>
-  <script src="components/three/three.js"></script>
-  <script src="components/end/end.js"></script>
+  <script src="./app.js"></script>
+  <script src="./components/intro/intro.js"></script>
+  <script src="./components/one/one.js"></script>
+  <script src="./components/two/two.js"></script>
+  <script src="./components/three/three.js"></script>
+  <script src="./components/end/end.js"></script>
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,8 +17,6 @@ function AppController(router) { @@
         { path: '/three',  component: 'three' },
         { path: '/end',    component: 'end' }
       ]);
-      router.navigate('/');
     }
@@ Expand Down @@