feat(router): provide RouteConfig object for AuxRoute

Closes #4319
angular · Oct 31, 2015 · 658ed1e · 658ed1e
1 parent 1a2e58f
commit 658ed1e
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/modules/angular2/src/router/route_config_impl.ts b/modules/angular2/src/router/route_config_impl.ts
@@ -38,16 +38,15 @@ export class Route implements RouteDefinition {
   path: string;
   component: Type;
   name: string;
-  // added next two properties to work around https://github.com/Microsoft/TypeScript/issues/4107
-  loader: Function;
-  redirectTo: string;
+  // added next three properties to work around https://github.com/Microsoft/TypeScript/issues/4107
+  aux: string = null;
+  loader: Function = null;
+  redirectTo: string = null;
   constructor({path, component, name,
                data}: {path: string, component: Type, name?: string, data?: {[key: string]: any}}) {
     this.path = path;
     this.component = component;
     this.name = name;
-    this.loader = null;
-    this.redirectTo = null;
     this.data = data;
   }
 }
@@ -78,7 +77,8 @@ export class AuxRoute implements RouteDefinition {
   path: string;
   component: Type;
   name: string;
-  // added next two properties to work around https://github.com/Microsoft/TypeScript/issues/4107
+  // added next three properties to work around https://github.com/Microsoft/TypeScript/issues/4107
+  aux: string = null;
   loader: Function = null;
   redirectTo: string = null;
   constructor({path, component, name}: {path: string, component: Type, name?: string}) {
@@ -115,6 +115,7 @@ export class AsyncRoute implements RouteDefinition {
   path: string;
   loader: Function;
   name: string;
+  aux: string = null;
   constructor({path, loader, name, data}:
                   {path: string, loader: Function, name?: string, data?: {[key: string]: any}}) {
     this.path = path;
@@ -148,9 +149,10 @@ export class Redirect implements RouteDefinition {
   path: string;
   redirectTo: string;
   name: string = null;
-  // added next property to work around https://github.com/Microsoft/TypeScript/issues/4107
+  // added next three properties to work around https://github.com/Microsoft/TypeScript/issues/4107
   loader: Function = null;
   data: any = null;
+  aux: string = null;
   constructor({path, redirectTo}: {path: string, redirectTo: string}) {
     this.path = path;
     this.redirectTo = redirectTo;

diff --git a/modules/angular2/src/router/route_config_nomalizer.ts b/modules/angular2/src/router/route_config_nomalizer.ts
@@ -26,6 +26,9 @@ export function normalizeRouteConfig(config: RouteDefinition): RouteDefinition {
   if (config.loader) {
     return new AsyncRoute({path: config.path, loader: config.loader, name: config.name});
   }
+  if (config.aux) {
+    return new AuxRoute({path: config.aux, component:<Type>config.component, name: config.name});
+  }
   if (config.component) {
     if (typeof config.component == 'object') {
       let componentDefinitionObject = <ComponentDefinition>config.component;

diff --git a/modules/angular2/src/router/route_definition.ts b/modules/angular2/src/router/route_definition.ts
@@ -4,15 +4,16 @@ import {CONST, Type} from 'angular2/src/core/facade/lang';
  * `RouteDefinition` defines a route within a {@link RouteConfig} decorator.
  *
  * Supported keys:
- * - `path` (required)
+ * - `path` or `aux` (requires exactly one of these)
  * - `component`, `loader`,  `redirectTo` (requires exactly one of these)
  * - `name` or `as` (optional) (requires exactly one of these)
  * - `data` (optional)
  *
  * See also {@link Route}, {@link AsyncRoute}, {@link AuxRoute}, and {@link Redirect}.
  */
 export interface RouteDefinition {
-  path: string;
+  path?: string;
+  aux?: string;
   component?: Type | ComponentDefinition;
   loader?: Function;
   redirectTo?: string;

diff --git a/modules/angular2/src/router/router.ts b/modules/angular2/src/router/router.ts
@@ -337,8 +337,11 @@ export class Router {
     }
 
     var promises = [];
-    this._auxRouters.forEach(
-        (router, name) => { promises.push(router.commit(instruction.auxInstruction[name])); });
+    this._auxRouters.forEach((router, name) => {
+      if (isPresent(instruction.auxInstruction[name])) {
+        promises.push(router.commit(instruction.auxInstruction[name]));
+      }
+    });
 
     return next.then((_) => PromiseWrapper.all(promises));
   }

diff --git a/modules/angular2/test/router/route_config_spec.ts b/modules/angular2/test/router/route_config_spec.ts
@@ -97,6 +97,20 @@ export function main() {
        }));
 
 
+    it('should work in an app with aux routes', inject([AsyncTestCompleter], (async) => {
+         bootstrap(AuxAppCmp, testBindings)
+             .then((applicationRef) => {
+               var router = applicationRef.hostComponent.router;
+               router.subscribe((_) => {
+                 expect(el).toHaveText('root { hello } aside { hello }');
+                 expect(applicationRef.hostComponent.location.path()).toEqual('/hello(aside)');
+                 async.done();
+               });
+               router.navigateByUrl('/hello(aside)');
+             });
+       }));
+
+
     it('should work in an app with async components defined with "loader"',
        inject([AsyncTestCompleter], (async) => {
          bootstrap(ConciseAsyncAppCmp, testBindings)
@@ -227,6 +241,13 @@ class ConciseAsyncAppCmp {
   constructor(public router: Router, public location: LocationStrategy) {}
 }
 
+@Component({selector: 'app-cmp'})
+@View({template: `root { <router-outlet></router-outlet> } aside { <router-outlet name="aside"></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+@RouteConfig([{path: '/hello', component: HelloCmp}, {aux: 'aside', component: HelloCmp}])
+class AuxAppCmp {
+  constructor(public router: Router, public location: LocationStrategy) {}
+}
+
 @Component({selector: 'app-cmp'})
 @View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
 @RouteConfig([