feat(router): sibling outlets

modules/angular2/src/router/router_outlet.js

@@ -1,6 +1,8 @@
 import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
+import {isBlank} from 'angular2/src/facade/lang';
 
 import {Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Attribute} from 'angular2/src/core/annotations_impl/di';
 import {Compiler, ViewContainerRef} from 'angular2/core';
 import {Injector, bind} from 'angular2/di';
 
@@ -16,12 +18,15 @@ export class RouterOutlet {
   _router:routerMod.Router;
   _viewContainer:ViewContainerRef;
 
-  constructor(viewContainer:ViewContainerRef, compiler:Compiler, router:routerMod.Router, injector:Injector) {
+  constructor(viewContainer:ViewContainerRef, compiler:Compiler, router:routerMod.Router, injector:Injector, @Attribute('name') nameAttr) {
+    if (isBlank(nameAttr)) {
+      nameAttr = 'default';
+    }
     this._router = router;
     this._viewContainer = viewContainer;
     this._compiler = compiler;
     this._injector = injector;
-    this._router.registerOutlet(this);
+    this._router.registerOutlet(this, nameAttr);
   }
 
   activate(instruction:Instruction) {

modules/angular2/test/router/outlet_spec.js

@@ -99,6 +99,24 @@ export function main() {
     }));
 
 
+    it('should work with sibling routers', inject([AsyncTestCompleter], (async) => {
+      compile('left { <router-outlet name="left"></router-outlet> } | right { <router-outlet name="right"></router-outlet> }')
+        .then((_) => rtr.config({'path': '/ab', 'components': {'left': A, 'right': B} }))
+        .then((_) => rtr.config({'path': '/ba', 'components': {'left': B, 'right': A} }))
+        .then((_) => rtr.navigate('/ab'))
+        .then((_) => {
+          view.detectChanges();
+          expect(view.rootNodes).toHaveText('left { A } | right { B }');
+        })
+        .then((_) => rtr.navigate('/ba'))
+        .then((_) => {
+          view.detectChanges();
+          expect(view.rootNodes).toHaveText('left { B } | right { A }');
+          async.done();
+        });
+    }));
+
+
     it('should generate link hrefs', inject([AsyncTestCompleter], (async) => {
       ctx.name = 'brian';
       compile('<a href="hello" router-link="user" [router-params]="{name: name}">{{name}}</a>')
@@ -130,6 +148,24 @@ class HelloCmp {
 }
 
 
+@Component({
+  selector: 'a-cmp'
+})
+@View({
+  template: "A"
+})
+class A {}
+
+
+@Component({
+  selector: 'b-cmp'
+})
+@View({
+  template: "B"
+})
+class B {}
+
+
 @Component({
   selector: 'user-cmp'
 })