Skip to content

Commit 0366f31

Browse files
committed
docs(router): improve docs for Location and related classes
Closes angular#4299
1 parent 8a23707 commit 0366f31

File tree

4 files changed

+188
-2
lines changed

4 files changed

+188
-2
lines changed

modules/angular2/src/router/hash_location_strategy.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,45 @@ import {Injectable} from 'angular2/src/core/di';
33
import {LocationStrategy} from './location_strategy';
44
import {EventListener, History, Location} from 'angular2/src/core/facade/browser';
55

6+
/**
7+
* `HashLocationStrategy` is a {@link LocationStrategy} used to configure the
8+
* {@link Location} service to represent its state in the
9+
* [hash fragment](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax)
10+
* of the browser's URL.
11+
*
12+
* `HashLocationStrategy` is the default binding for {@link LocationStrategy}
13+
* provided in {@link routerBindings} and {@link ROUTER_BINDINGS}.
14+
*
15+
* For instance, if you call `location.go('/foo')`, the browser's URL will become
16+
* `example.com#/foo`.
17+
*
18+
* ## Example
19+
*
20+
* ```
21+
* import {Component, View} from 'angular2/angular2';
22+
* import {
23+
* ROUTER_DIRECTIVES,
24+
* routerBindings,
25+
* RouteConfig,
26+
* Location
27+
* } from 'angular2/router';
28+
*
29+
* @Component({...})
30+
* @View({directives: [ROUTER_DIRECTIVES]})
31+
* @RouteConfig([
32+
* {...},
33+
* ])
34+
* class AppCmp {
35+
* constructor(location: Location) {
36+
* location.go('/foo');
37+
* }
38+
* }
39+
*
40+
* bootstrap(AppCmp, [
41+
* routerBindings(AppCmp) // includes binding to HashLocationStrategy
42+
* ]);
43+
* ```
44+
*/
645
@Injectable()
746
export class HashLocationStrategy extends LocationStrategy {
847
private _location: Location;

modules/angular2/src/router/location.ts

Lines changed: 87 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,78 @@ import {isBlank} from 'angular2/src/core/facade/lang';
55
import {BaseException, WrappedException} from 'angular2/src/core/facade/exceptions';
66
import {OpaqueToken, Injectable, Optional, Inject} from 'angular2/src/core/di';
77

8+
/**
9+
* The `APP_BASE_HREF` token represents the base href to be used with the
10+
* {@link PathLocationStrategy}.
11+
*
12+
* If you're using {@link PathLocationStrategy}, you must provide a binding to a string
13+
* representing the URL prefix that should be preserved when generating and recognizing
14+
* URLs.
15+
*
16+
* ## Example
17+
*
18+
* ```
19+
* import {Component, View} from 'angular2/angular2';
20+
* import {ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
21+
*
22+
* @Component({...})
23+
* @View({directives: [ROUTER_DIRECTIVES]})
24+
* @RouteConfig([
25+
* {...},
26+
* ])
27+
* class AppCmp {
28+
* // ...
29+
* }
30+
*
31+
* bootstrap(AppCmp, [
32+
* routerBindings(AppCmp),
33+
* PathLocationStrategy,
34+
* bind(APP_BASE_HREF).toValue('/my/app')
35+
* ]);
36+
* ```
37+
*/
838
export const APP_BASE_HREF: OpaqueToken = CONST_EXPR(new OpaqueToken('appBaseHref'));
939

1040
/**
11-
* This is the service that an application developer will directly interact with.
41+
* `Location` is a service that applications can use to interact with a browser's URL.
42+
* Depending on which {@link LocationStrategy} is used, `Location` will either persist
43+
* to the URL's path or the URL's hash segment.
44+
*
45+
* Note: it's better to use {@link Router#navigate} service to trigger route changes. Use
46+
* `Location` only if you need to interact with or create normalized URLs outside of
47+
* routing.
1248
*
13-
* Responsible for normalizing the URL against the application's base href.
49+
* `Location` is responsible for normalizing the URL against the application's base href.
1450
* A normalized URL is absolute from the URL host, includes the application's base href, and has no
1551
* trailing slash:
1652
* - `/my/app/user/123` is normalized
1753
* - `my/app/user/123` **is not** normalized
1854
* - `/my/app/user/123/` **is not** normalized
55+
*
56+
* ## Example
57+
*
58+
* ```
59+
* import {Component, View} from 'angular2/angular2';
60+
* import {
61+
* ROUTER_DIRECTIVES,
62+
* routerBindings,
63+
* RouteConfig,
64+
* Location
65+
* } from 'angular2/router';
66+
*
67+
* @Component({...})
68+
* @View({directives: [ROUTER_DIRECTIVES]})
69+
* @RouteConfig([
70+
* {...},
71+
* ])
72+
* class AppCmp {
73+
* constructor(location: Location) {
74+
* location.go('/foo');
75+
* }
76+
* }
77+
*
78+
* bootstrap(AppCmp, [routerBindings(AppCmp)]);
79+
* ```
1980
*/
2081
@Injectable()
2182
export class Location {
@@ -36,28 +97,52 @@ export class Location {
3697
(_) => { ObservableWrapper.callNext(this._subject, {'url': this.path(), 'pop': true}); });
3798
}
3899

100+
/**
101+
* Returns the normalized URL path.
102+
*/
39103
path(): string { return this.normalize(this.platformStrategy.path()); }
40104

105+
/**
106+
* Given a string representing a URL, returns the normalized URL path.
107+
*/
41108
normalize(url: string): string {
42109
return stripTrailingSlash(_stripBaseHref(this._baseHref, stripIndexHtml(url)));
43110
}
44111

112+
/**
113+
* Given a string representing a URL, returns the normalized URL path.
114+
* If the given URL doesn't begin with a leading slash (`'/'`), this method adds one
115+
* before normalizing.
116+
*/
45117
normalizeAbsolutely(url: string): string {
46118
if (!url.startsWith('/')) {
47119
url = '/' + url;
48120
}
49121
return stripTrailingSlash(_addBaseHref(this._baseHref, url));
50122
}
51123

124+
/**
125+
* Changes the browsers URL to the normalized version of the given URL, and pushes a
126+
* new item onto the platform's history.
127+
*/
52128
go(url: string): void {
53129
var finalUrl = this.normalizeAbsolutely(url);
54130
this.platformStrategy.pushState(null, '', finalUrl);
55131
}
56132

133+
/**
134+
* Navigates forward in the platform's history.
135+
*/
57136
forward(): void { this.platformStrategy.forward(); }
58137

138+
/**
139+
* Navigates back in the platform's history.
140+
*/
59141
back(): void { this.platformStrategy.back(); }
60142

143+
/**
144+
* Subscribe to the platform's `popState` events.
145+
*/
61146
subscribe(onNext: (value: any) => void, onThrow: (exception: any) => void = null,
62147
onReturn: () => void = null): void {
63148
ObservableWrapper.subscribe(this._subject, onNext, onThrow, onReturn);

modules/angular2/src/router/location_strategy.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,22 @@ function _abstract() {
44
return new BaseException('This method is abstract');
55
}
66

7+
/**
8+
* `LocationStrategy` is responsible for representing and reading route state
9+
* from the the browser's URL. Angular provides two strategies:
10+
* {@link HashLocationStrategy} (default) and {@link PathLocationStrategy}.
11+
*
12+
* This is used under the hood of the {@link Location} service.
13+
*
14+
* Applications should use the {@link Router} or {@link Location} services to
15+
* interact with application route state.
16+
*
17+
* For instance, {@link HashLocationStrategy} produces URLs like
18+
* `http://example.com#/foo`, and {@link PathLocationStrategy} produces
19+
* `http://example.com/foo` as an equivalent URL.
20+
*
21+
* See these two classes for more.
22+
*/
723
export class LocationStrategy {
824
path(): string { throw _abstract(); }
925
pushState(ctx: any, title: string, url: string): void { throw _abstract(); }

modules/angular2/src/router/path_location_strategy.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,52 @@ import {Injectable} from 'angular2/src/core/di';
33
import {EventListener, History, Location} from 'angular2/src/core/facade/browser';
44
import {LocationStrategy} from './location_strategy';
55

6+
/**
7+
* `PathLocationStrategy` is a {@link LocationStrategy} used to configure the
8+
* {@link Location} service to represent its state in the
9+
* [path](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax) of the
10+
* browser's URL.
11+
*
12+
* If you're using `PathLocationStrategy`, you must provide a binding for
13+
* {@link APP_BASE_HREF} to a string representing the URL prefix that should
14+
* be preserved when generating and recognizing URLs.
15+
*
16+
* For instance, if you provide an `APP_BASE_HREF` of `'/my/app'` and call
17+
* `location.go('/foo')`, the browser's URL will become
18+
* `example.com/my/app/foo`.
19+
*
20+
* ## Example
21+
*
22+
* ```
23+
* import {Component, View, bind} from 'angular2/angular2';
24+
* import {
25+
* APP_BASE_HREF
26+
* ROUTER_DIRECTIVES,
27+
* routerBindings,
28+
* RouteConfig,
29+
* Location,
30+
* LocationStrategy,
31+
* PathLocationStrategy
32+
* } from 'angular2/router';
33+
*
34+
* @Component({...})
35+
* @View({directives: [ROUTER_DIRECTIVES]})
36+
* @RouteConfig([
37+
* {...},
38+
* ])
39+
* class AppCmp {
40+
* constructor(location: Location) {
41+
* location.go('/foo');
42+
* }
43+
* }
44+
*
45+
* bootstrap(AppCmp, [
46+
* routerBindings(AppCmp),
47+
* bind(LocationStrategy).toClass(PathLocationStrategy),
48+
* bind(APP_BASE_HREF).toValue('/my/app')
49+
* ]);
50+
* ```
51+
*/
652
@Injectable()
753
export class PathLocationStrategy extends LocationStrategy {
854
private _location: Location;

0 commit comments

Comments
 (0)