fix(router): respond to hashchange events

btford · btford · commit 53bddec1d2a8 · 2015-10-30T15:04:31.000-07:00
Previously if the URL changed in `HashLocation` mode, the router would not pick up the change. This adds a listener in `HashLocationStrategy` for `hashchange` events to fix the problem. Closes #5013
diff --git a/modules/angular2/src/router/path_location_strategy.ts b/modules/angular2/src/router/path_location_strategy.ts
@@ -63,6 +63,7 @@ export class PathLocationStrategy extends LocationStrategy {
 
   onPopState(fn: EventListener): void {
     DOM.getGlobalEventTarget('window').addEventListener('popstate', fn, false);
+    DOM.getGlobalEventTarget('window').addEventListener('hashchange', fn, false);
   }
 
   getBaseHref(): string { return this._baseHref; }
diff --git a/modules/playground/e2e_test/hash_routing/hash_location_spec.dart b/modules/playground/e2e_test/hash_routing/hash_location_spec.dart
@@ -0,0 +1,3 @@
+library playground.e2e_test.hash_location_spec;
+
+main() {}
diff --git a/modules/playground/e2e_test/hash_routing/hash_location_spec.ts b/modules/playground/e2e_test/hash_routing/hash_location_spec.ts
@@ -0,0 +1,29 @@
+import {verifyNoBrowserErrors} from 'angular2/src/testing/e2e_util';
+import {Promise} from 'angular2/src/core/facade/async';
+
+function waitForElement(selector) {
+  var EC = (<any>protractor).ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('hash routing example app', function() {
+  afterEach(verifyNoBrowserErrors);
+
+  var URL = 'playground/src/hash_routing/index.html';
+
+  it('should navigate between routes', function() {
+    browser.get(URL + '#/bye');
+    waitForElement('goodbye-cmp');
+
+    element(by.css('#hello-link')).click();
+    waitForElement('hello-cmp');
+
+    expect(element(by.css('hello-cmp')).getText()).toContain('hello');
+
+    browser.navigate().back();
+    waitForElement('goodbye-cmp');
+
+    expect(element(by.css('goodbye-cmp')).getText()).toContain('goodbye');
+  });
+});
diff --git a/modules/playground/src/hash_routing/index.html b/modules/playground/src/hash_routing/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<title>Routing Example</title>
+<base href="/playground/src/hash_routing/">
+<body>
+  <example-app>
+    Loading...
+  </example-app>
+
+  $SCRIPTS$
+</body>
+</html>
diff --git a/modules/playground/src/hash_routing/index.ts b/modules/playground/src/hash_routing/index.ts
@@ -0,0 +1,49 @@
+import {Component, provide} from 'angular2/angular2';
+import {bootstrap} from 'angular2/bootstrap';
+import {
+  RouteConfig,
+  Route,
+  ROUTER_PROVIDERS,
+  ROUTER_DIRECTIVES,
+  HashLocationStrategy,
+  LocationStrategy
+} from 'angular2/router';
+
+import {reflector} from 'angular2/src/core/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/core/reflection/reflection_capabilities';
+
+@Component({selector: 'hello-cmp', template: `hello`})
+class HelloCmp {
+}
+
+
+@Component({selector: 'goodbye-cmp', template: `goodbye`})
+class GoodByeCmp {
+}
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>My App</h1>
+    <nav>
+      <a href="#/" id="hello-link">Navigate via href</a> |
+      <a [router-link]="['/GoodbyeCmp']" id="goodbye-link">Navigate with Link DSL</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  new Route({path: '/', component: HelloCmp, name: 'HelloCmp'}),
+  new Route({path: '/bye', component: GoodByeCmp, name: 'GoodbyeCmp'})
+])
+class AppCmp {
+}
+
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrap(AppCmp,
+            [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);
+}
diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts
@@ -43,6 +43,7 @@ const kServedPaths = [
   'playground/src/person_management',
   'playground/src/order_management',
   'playground/src/gestures',
+  'playground/src/hash_routing',
   'playground/src/hello_world',
   'playground/src/http',
   'playground/src/jsonp',

Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,7 @@ export class PathLocationStrategy extends LocationStrategy {`
`63`	`63`
`64`	`64`	`onPopState(fn: EventListener): void {`
`65`	`65`	`DOM.getGlobalEventTarget('window').addEventListener('popstate', fn, false);`
	`66`	`+ DOM.getGlobalEventTarget('window').addEventListener('hashchange', fn, false);`
`66`	`67`	`}`
`67`	`68`
`68`	`69`	`getBaseHref(): string { return this._baseHref; }`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+library playground.e2e_test.hash_location_spec;`
	`2`	`+`
	`3`	`+main() {}`