angular-cn/packages/router
Victor Berchet a755b715ed feat(router): introduce `ParamMap` to access parameters
The Router use the type `Params` for all of:
- position parameters,
- matrix parameters,
- query parameters.

`Params` is defined as follow `type Params = {[key: string]: any}`

Because parameters can either have single or multiple values, the type should
actually be `type Params = {[key: string]: string | string[]}`.

The client code often assumes that parameters have single values, as in the
following exemple:

```
class MyComponent {
sessionId: Observable<string>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.sessionId = this.route
      .queryParams
      .map(params => params['session_id'] || 'None');
}
}

```

The problem here is that `params['session_id']` could be `string` or `string[]`
but the error is not caught at build time because of the `any` type.

Fixing the type as describe above would break the build because `sessionId`
would becomes an `Observable<string | string[]>`.

However the client code knows if it expects a single or multiple values. By
using the new `ParamMap` interface the user code can decide when it needs a
single value (calling `ParamMap.get(): string`) or multiple values (calling
`ParamMap.getAll(): string[]`).

The above exemple should be rewritten as:

```
class MyComponent {
sessionId: Observable<string>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.sessionId = this.route
      .queryParamMap
      .map(paramMap => paramMap.get('session_id') || 'None');
}
}

```

Added APIs:
- `interface ParamMap`,
- `ActivatedRoute.paramMap: ParamMap`,
- `ActivatedRoute.queryParamMap: ParamMap`,
- `ActivatedRouteSnapshot.paramMap: ParamMap`,
- `ActivatedRouteSnapshot.queryParamMap: ParamMap`,
- `UrlSegment.parameterMap: ParamMap`
2017-03-20 09:19:32 -07:00
..
scripts refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00
src feat(router): introduce `ParamMap` to access parameters 2017-03-20 09:19:32 -07:00
test feat(router): introduce `ParamMap` to access parameters 2017-03-20 09:19:32 -07:00
testing test: add systemjs+umd integration test (#14196) 2017-03-19 12:23:07 -05:00
upgrade test: add systemjs+umd integration test (#14196) 2017-03-19 12:23:07 -05:00
.gitignore refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00
CHANGELOG.md refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00
LICENSE refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00
README.md refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00
index.ts refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00
karma-test-shim.js refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00
karma.conf.js build: build modules and examples for karma 2017-03-08 17:35:20 -08:00
package.json build: fix paths to typings files so tsickle resolves imports correctly 2017-03-16 17:34:29 -07:00
public_api.ts refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00
rollup.config.js test: add systemjs+umd integration test (#14196) 2017-03-19 12:23:07 -05:00
tsconfig-build.json build: fix file paths after moving modules/@angular/* to packages/* 2017-03-08 16:29:28 -08:00

README.md

Angular Router

Managing state transitions is one of the hardest parts of building applications. This is especially true on the web, where you also need to ensure that the state is reflected in the URL. In addition, we often want to split applications into multiple bundles and load them on demand. Doing this transparently isnt trivial.

The Angular router is designed to solve these problems. Using the router, you can declaratively specify application state, manage state transitions while taking care of the URL, and load components on demand.

Overview

Read the overview of the Router here.

Guide

Read the dev guide here.

Local development

# keep @angular/router fresh
$ ./scripts/karma.sh

# keep @angular/core fresh
$ ../../../node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w

# start karma
$ ./scripts/karma.sh