feat(router): add location service

Author: btford

modules/angular2/src/mock/location_mock.js

@@ -0,0 +1,58 @@
+import {SpyObject, proxy} from 'angular2/test_lib';
+
+import {isBlank, isPresent, IMPLEMENTS} from 'angular2/src/facade/lang';
+import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
+import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {Location} from 'angular2/src/router/location';
+
+
+@proxy
+@IMPLEMENTS(Location)
+export class DummyLocation extends SpyObject {
+ urlChanges:List<string>;
+ _path:string;
+ _subject:EventEmitter;
+
+ constructor() {
+ super();
+ this._path = '/';
+ this.urlChanges = ListWrapper.create();
+ this._subject = new EventEmitter();
+ }
+
+ setInitialPath(url:string) {
+ this._path = url;
+ }
+
+ path():string {
+ return this._path;
+ }
+
+ simulateUrlPop(pathname:string) {
+ ObservableWrapper.callNext(this._subject, {
+ 'url': pathname
+ });
+ }
+
+ go(url:string) {
+ if (this._path === url) {
+ return;
+ }
+ this._path = url;
+ ListWrapper.push(this.urlChanges, url);
+ }
+
+ forward() {
+ // TODO
+ }
+
+ back() {
+ // TODO
+ }
+
+ subscribe(onNext, onThrow = null, onReturn = null) {
+ ObservableWrapper.subscribe(this._subject, onNext, onThrow, onReturn);
+ }
+
+ noSuchMethod(m){return super.noSuchMethod(m);}
+}

modules/angular2/src/router/location.js

@@ -0,0 +1,40 @@
+import {global} from 'angular2/src/facade/lang';
+import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
+
+export class Location {
+ _location;
+ _subject:EventEmitter;
+ _history;
+ constructor() {
+ this._subject = new EventEmitter();
+ this._location = global.location;
+ this._history = global.history;
+ global.addEventListener('popstate', (_) => this._onPopState(_), false);
+ }
+
+ _onPopState(_) {
+ ObservableWrapper.callNext(this._subject, {
+ 'url': this._location.pathname
+ });
+ }
+
+ path() {
+ return this._location.pathname;
+ }
+
+ go(url:string) {
+ this._history.pushState(null, null, url);
+ }
+
+ forward() {
+ this._history.forward();
+ }
+
+ back() {
+ this._history.back()
+ }
+
+ subscribe(onNext, onThrow = null, onReturn = null) {
+ ObservableWrapper.subscribe(this._subject, onNext, onThrow, onReturn);
+ }
+}

modules/angular2/src/router/router.js

@@ -6,6 +6,7 @@ import {RouteRegistry} from './route_registry';
 import {Pipeline} from './pipeline';
 import {Instruction} from './instruction';
 import {RouterOutlet} from './router_outlet';
+import {Location} from './location';
 
 /**
  * # Router
@@ -28,17 +29,21 @@ export class Router {
  _outlets:Map<any, RouterOutlet>;
  _children:Map<any, Router>;
  _subject:EventEmitter;
-
- constructor(registry:RouteRegistry, pipeline:Pipeline, parent:Router = null, name = '/') {
+ _location:Location;
+ 
+ constructor(registry:RouteRegistry, pipeline:Pipeline, location:Location, parent:Router = null, name = '/') {
  this.name = name;
  this.navigating = false;
  this.parent = parent;
  this.previousUrl = null;
  this._outlets = MapWrapper.create();
  this._children = MapWrapper.create();
+ this._location = location;
  this._registry = registry;
  this._pipeline = pipeline;
  this._subject = new EventEmitter();
+ this._location.subscribe((url) => this.navigate(url));
+ this.navigate(location.path());
  }
 
 
@@ -97,6 +102,9 @@ export class Router {
  this._startNavigating();
 
  var result = this._pipeline.process(instruction)
+ .then((_) => {
+ this._location.go(instruction.matchedUrl);
+ })
  .then((_) => {
  ObservableWrapper.callNext(this._subject, instruction.matchedUrl);
  })
@@ -170,19 +178,19 @@ export class Router {
  }
 
  static getRoot():Router {
- return new RootRouter(new Pipeline());
+ return new RootRouter(new Pipeline(), new Location());
  }
 }
 
 export class RootRouter extends Router {
- constructor(pipeline:Pipeline) {
- super(new RouteRegistry(), pipeline, null, '/');
+ constructor(pipeline:Pipeline, location:Location) {
+ super(new RouteRegistry(), pipeline, location, null, '/');
  }
 }
 
 class ChildRouter extends Router {
  constructor(parent, name) {
- super(parent._registry, parent._pipeline, parent, name);
+ super(parent._registry, parent._pipeline, parent._location, parent, name);
  this.parent = parent;
  }
 }

modules/angular2/test/router/outlet_spec.js

@@ -25,6 +25,8 @@ import {Router, RouterOutlet, RouterLink, RouteConfig, RouteParams} from 'angula
 
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
+import {DummyLocation} from 'angular2/src/mock/location_mock';
+
 export function main() {
  describe('Outlet Directive', () => {
 
@@ -36,7 +38,7 @@ export function main() {
  }));
 
  beforeEachBindings(() => {
- router = new RootRouter(new Pipeline());
+ router = new RootRouter(new Pipeline(), new DummyLocation());
  return [
  bind(Router).toValue(router)
  ];

modules/angular2/test/router/router_spec.js

@@ -12,16 +12,47 @@ import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
 import {RootRouter} from 'angular2/src/router/router';
 import {Pipeline} from 'angular2/src/router/pipeline';
 import {RouterOutlet} from 'angular2/src/router/router_outlet';
-
+import {DummyLocation} from 'angular2/src/mock/location_mock'
 
 export function main() {
  describe('Router', () => {
- var router;
+ var router,
+ location;
 
  beforeEach(() => {
- router = new RootRouter(new Pipeline());
+ location = new DummyLocation();
+ router = new RootRouter(new Pipeline(), location);
  });
 
+
+ it('should navigate based on the initial URL state', inject([AsyncTestCompleter], (async) => {
+ var outlet = makeDummyRef();
+
+ router.config('/', {'component': 'Index' })
+ .then((_) => router.registerOutlet(outlet))
+ .then((_) => {
+ expect(outlet.spy('activate')).toHaveBeenCalled();
+ expect(location.urlChanges).toEqual(['/']);
+ async.done();
+ });
+ }));
+
+
+ it('should activate viewports and update URL on navigate', inject([AsyncTestCompleter], (async) => {
+ var outlet = makeDummyRef();
+
+ router.registerOutlet(outlet)
+ .then((_) => {
+ return router.config('/a', {'component': 'A' });
+ })
+ .then((_) => router.navigate('/a'))
+ .then((_) => {
+ expect(outlet.spy('activate')).toHaveBeenCalled();
+ expect(location.urlChanges).toEqual(['/a']);
+ async.done();
+ });
+ }));
+
  it('should navigate after being configured', inject([AsyncTestCompleter], (async) => {
  var outlet = makeDummyRef();