cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(router): implement data and resolve

Browse Source
This commit is contained in:
vsavkin
2016-06-27 14:00:07 -07:00
parent e913d9954d
commit f2f1ec0117
11 changed files with 318 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
modules/@angular/router/src/config.ts
View File

@ -9,6 +9,12 @@
import {Type} from '@angular/core';
export type RouterConfig = Route[];
export type Data = {
[name: string]: any
};
export type ResolveData = {
[name: string]: any
};
export interface Route {
path?: string;
@ -19,6 +25,8 @@ export interface Route {
canDeactivate?: any[];
redirectTo?: string;
children?: Route[];
data?: Data;
resolve?: ResolveData;
}
export function validateConfig(config: RouterConfig): void {

3
modules/@angular/router/src/create_router_state.ts
View File

@ -48,7 +48,8 @@ function createOrReuseChildren(
function createActivatedRoute(c: ActivatedRouteSnapshot) {
return new ActivatedRoute(
new BehaviorSubject(c.url), new BehaviorSubject(c.params), c.outlet, c.component, c);
new BehaviorSubject(c.url), new BehaviorSubject(c.params), new BehaviorSubject(c.data),
c.outlet, c.component, c);
}
function equalRouteSnapshots(a: ActivatedRouteSnapshot, b: ActivatedRouteSnapshot): boolean {

4
modules/@angular/router/src/interfaces.ts
View File

@ -23,4 +23,8 @@ export interface CanActivate {
export interface CanDeactivate<T> {
canDeactivate(component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<boolean>|boolean;
}
export interface Resolve<T> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|any;
}

88
modules/@angular/router/src/recognize.ts
View File

@ -11,8 +11,8 @@ import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import {of } from 'rxjs/observable/of';
import {Route, RouterConfig} from './config';
import {ActivatedRouteSnapshot, RouterStateSnapshot} from './router_state';
import {Data, ResolveData, Route, RouterConfig} from './config';
import {ActivatedRouteSnapshot, InheritedResolve, RouterStateSnapshot} from './router_state';
import {PRIMARY_OUTLET, Params} from './shared';
import {UrlPathWithParams, UrlSegment, UrlTree, mapChildrenIntoArray} from './url_tree';
import {last, merge} from './utils/collection';
@ -22,13 +22,31 @@ class NoMatch {
constructor(public segment: UrlSegment = null) {}
}
class InheritedFromParent {
constructor(
public parent: InheritedFromParent, public params: Params, public data: Data,
public resolve: InheritedResolve) {}
get allParams(): Params {
return this.parent ? merge(this.parent.allParams, this.params) : this.params;
}
get allData(): Data { return this.parent ? merge(this.parent.allData, this.data) : this.data; }
static get empty(): InheritedFromParent {
return new InheritedFromParent(null, {}, {}, new InheritedResolve(null, {}));
}
}
export function recognize(
rootComponentType: Type, config: RouterConfig, urlTree: UrlTree,
url: string): Observable<RouterStateSnapshot> {
try {
const children = processSegment(config, urlTree.root, {}, PRIMARY_OUTLET);
const children =
processSegment(config, urlTree.root, InheritedFromParent.empty, PRIMARY_OUTLET);
const root = new ActivatedRouteSnapshot(
[], {}, PRIMARY_OUTLET, rootComponentType, null, urlTree.root, -1);
[], {}, {}, PRIMARY_OUTLET, rootComponentType, null, urlTree.root, -1,
InheritedResolve.empty);
const rootNode = new TreeNode<ActivatedRouteSnapshot>(root, children);
return of (new RouterStateSnapshot(url, rootNode, urlTree.queryParams, urlTree.fragment));
} catch (e) {
@ -43,19 +61,21 @@ export function recognize(
}
}
function processSegment(config: Route[], segment: UrlSegment, extraParams: Params, outlet: string):
TreeNode<ActivatedRouteSnapshot>[] {
function processSegment(
config: Route[], segment: UrlSegment, inherited: InheritedFromParent,
outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
if (segment.pathsWithParams.length === 0 && segment.hasChildren()) {
return processSegmentChildren(config, segment, extraParams);
return processSegmentChildren(config, segment, inherited);
} else {
return processPathsWithParams(config, segment, 0, segment.pathsWithParams, extraParams, outlet);
return processPathsWithParams(config, segment, 0, segment.pathsWithParams, inherited, outlet);
}
}
function processSegmentChildren(
config: Route[], segment: UrlSegment, extraParams: Params): TreeNode<ActivatedRouteSnapshot>[] {
config: Route[], segment: UrlSegment,
inherited: InheritedFromParent): TreeNode<ActivatedRouteSnapshot>[] {
const children = mapChildrenIntoArray(
segment, (child, childOutlet) => processSegment(config, child, extraParams, childOutlet));
segment, (child, childOutlet) => processSegment(config, child, inherited, childOutlet));
checkOutletNameUniqueness(children);
sortActivatedRouteSnapshots(children);
return children;
@ -71,10 +91,10 @@ function sortActivatedRouteSnapshots(nodes: TreeNode<ActivatedRouteSnapshot>[]):
function processPathsWithParams(
config: Route[], segment: UrlSegment, pathIndex: number, paths: UrlPathWithParams[],
extraParams: Params, outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
inherited: InheritedFromParent, outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
for (let r of config) {
try {
return processPathsWithParamsAgainstRoute(r, segment, pathIndex, paths, extraParams, outlet);
return processPathsWithParamsAgainstRoute(r, segment, pathIndex, paths, inherited, outlet);
} catch (e) {
if (!(e instanceof NoMatch)) throw e;
}
@ -84,32 +104,39 @@ function processPathsWithParams(
function processPathsWithParamsAgainstRoute(
route: Route, rawSegment: UrlSegment, pathIndex: number, paths: UrlPathWithParams[],
parentExtraParams: Params, outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
inherited: InheritedFromParent, outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
if (route.redirectTo) throw new NoMatch();
if ((route.outlet ? route.outlet : PRIMARY_OUTLET) !== outlet) throw new NoMatch();
const newInheritedResolve = new InheritedResolve(inherited.resolve, getResolve(route));
if (route.path === '**') {
const params = paths.length > 0 ? last(paths).parameters : {};
const snapshot = new ActivatedRouteSnapshot(
paths, merge(parentExtraParams, params), outlet, route.component, route,
getSourceSegment(rawSegment), getPathIndexShift(rawSegment) - 1);
paths, merge(inherited.allParams, params), merge(inherited.allData, getData(route)), outlet,
route.component, route, getSourceSegment(rawSegment), getPathIndexShift(rawSegment) - 1,
newInheritedResolve);
return [new TreeNode<ActivatedRouteSnapshot>(snapshot, [])];
}
const {consumedPaths, parameters, extraParams, lastChild} =
match(rawSegment, route, paths, parentExtraParams);
const {consumedPaths, parameters, lastChild} = match(rawSegment, route, paths);
const rawSlicedPath = paths.slice(lastChild);
const childConfig = route.children ? route.children : [];
const newInherited = route.component ?
InheritedFromParent.empty :
new InheritedFromParent(inherited, parameters, getData(route), newInheritedResolve);
const {segment, slicedPath} = split(rawSegment, consumedPaths, rawSlicedPath, childConfig);
const snapshot = new ActivatedRouteSnapshot(
consumedPaths, parameters, outlet, route.component, route, getSourceSegment(rawSegment),
getPathIndexShift(rawSegment) + pathIndex + lastChild - 1);
consumedPaths, merge(inherited.allParams, parameters),
merge(inherited.allData, getData(route)), outlet, route.component, route,
getSourceSegment(rawSegment), getPathIndexShift(rawSegment) + pathIndex + lastChild - 1,
newInheritedResolve);
if (slicedPath.length === 0 && segment.hasChildren()) {
const children = processSegmentChildren(childConfig, segment, extraParams);
const children = processSegmentChildren(childConfig, segment, newInherited);
return [new TreeNode<ActivatedRouteSnapshot>(snapshot, children)];
} else if (childConfig.length === 0 && slicedPath.length === 0) {
@ -117,18 +144,17 @@ function processPathsWithParamsAgainstRoute(
} else {
const children = processPathsWithParams(
childConfig, segment, pathIndex + lastChild, slicedPath, extraParams, PRIMARY_OUTLET);
childConfig, segment, pathIndex + lastChild, slicedPath, newInherited, PRIMARY_OUTLET);
return [new TreeNode<ActivatedRouteSnapshot>(snapshot, children)];
}
}
function match(
segment: UrlSegment, route: Route, paths: UrlPathWithParams[], parentExtraParams: Params) {
function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]) {
if (route.path === '') {
if (route.terminal && (segment.hasChildren() || paths.length > 0)) {
throw new NoMatch();
} else {
return {consumedPaths: [], lastChild: 0, parameters: {}, extraParams: {}};
return {consumedPaths: [], lastChild: 0, parameters: {}};
}
}
@ -158,10 +184,8 @@ function match(
throw new NoMatch();
}
const parameters = merge(
parentExtraParams, merge(posParameters, consumedPaths[consumedPaths.length - 1].parameters));
const extraParams = route.component ? {} : parameters;
return {consumedPaths, lastChild: currentIndex, parameters, extraParams};
const parameters = merge(posParameters, consumedPaths[consumedPaths.length - 1].parameters);
return {consumedPaths, lastChild: currentIndex, parameters};
}
function checkOutletNameUniqueness(nodes: TreeNode<ActivatedRouteSnapshot>[]): void {
@ -274,4 +298,12 @@ function emptyPathMatch(segment: UrlSegment, slicedPath: UrlPathWithParams[], r:
function getOutlet(route: Route): string {
return route.outlet ? route.outlet : PRIMARY_OUTLET;
}
function getData(route: Route): Data {
return route.data ? route.data : {};
}
function getResolve(route: Route): ResolveData {
return route.resolve ? route.resolve : {};
}

72
modules/@angular/router/src/router.ts
View File

@ -9,8 +9,10 @@
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/mergeAll';
import 'rxjs/add/operator/reduce';
import 'rxjs/add/operator/every';
import 'rxjs/add/observable/from';
import 'rxjs/add/observable/forkJoin';
import {Location} from '@angular/common';
import {ComponentResolver, Injector, ReflectiveInjector, Type} from '@angular/core';
@ -20,17 +22,17 @@ import {Subscription} from 'rxjs/Subscription';
import {of } from 'rxjs/observable/of';
import {applyRedirects} from './apply_redirects';
import {RouterConfig, validateConfig} from './config';
import {Data, ResolveData, RouterConfig, validateConfig} from './config';
import {createRouterState} from './create_router_state';
import {createUrlTree} from './create_url_tree';
import {RouterOutlet} from './directives/router_outlet';
import {recognize} from './recognize';
import {resolve} from './resolve';
import {RouterOutletMap} from './router_outlet_map';
import {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot, advanceActivatedRoute, createEmptyState} from './router_state';
import {ActivatedRoute, ActivatedRouteSnapshot, InheritedResolve, RouterState, RouterStateSnapshot, advanceActivatedRoute, createEmptyState} from './router_state';
import {PRIMARY_OUTLET, Params} from './shared';
import {UrlSerializer, UrlTree, createEmptyUrlTree} from './url_tree';
import {forEach, shallowEqual} from './utils/collection';
import {forEach, merge, shallowEqual} from './utils/collection';
import {TreeNode} from './utils/tree';
export interface NavigationExtras {
@ -277,6 +279,7 @@ export class Router {
let updatedUrl: UrlTree;
let state: RouterState;
let navigationIsSuccessful: boolean;
let preActivation: PreActivation;
applyRedirects(url, this.config)
.mergeMap(u => {
updatedUrl = u;
@ -296,11 +299,20 @@ export class Router {
})
.map((newState: RouterState) => {
state = newState;
preActivation =
new PreActivation(state.snapshot, this.currentRouterState.snapshot, this.injector);
preActivation.traverse(this.outletMap);
})
.mergeMap(_ => {
return new GuardChecks(state.snapshot, this.currentRouterState.snapshot, this.injector)
.check(this.outletMap);
return preActivation.checkGuards();
})
.mergeMap(shouldActivate => {
if (shouldActivate) {
return preActivation.resolveData().map(() => shouldActivate);
} else {
return of (shouldActivate);
}
})
.forEach((shouldActivate: boolean) => {
@ -345,18 +357,20 @@ class CanDeactivate {
constructor(public component: Object, public route: ActivatedRouteSnapshot) {}
}
class GuardChecks {
class PreActivation {
private checks: Array<CanActivate|CanDeactivate> = [];
constructor(
private future: RouterStateSnapshot, private curr: RouterStateSnapshot,
private injector: Injector) {}
check(parentOutletMap: RouterOutletMap): Observable<boolean> {
traverse(parentOutletMap: RouterOutletMap): void {
const futureRoot = this.future._root;
const currRoot = this.curr ? this.curr._root : null;
this.traverseChildRoutes(futureRoot, currRoot, parentOutletMap);
if (this.checks.length === 0) return of (true);
}
checkGuards(): Observable<boolean> {
if (this.checks.length === 0) return of (true);
return Observable.from(this.checks)
.map(s => {
if (s instanceof CanActivate) {
@ -371,6 +385,19 @@ class GuardChecks {
.every(result => result === true);
}
resolveData(): Observable<any> {
if (this.checks.length === 0) return of (null);
return Observable.from(this.checks)
.mergeMap(s => {
if (s instanceof CanActivate) {
return this.runResolve(s.route);
} else {
return of (null);
}
})
.reduce((_, __) => _);
}
private traverseChildRoutes(
futureNode: TreeNode<ActivatedRouteSnapshot>, currNode: TreeNode<ActivatedRouteSnapshot>,
outletMap: RouterOutletMap): void {
@ -476,6 +503,32 @@ class GuardChecks {
.mergeAll()
.every(result => result === true);
}
private runResolve(future: ActivatedRouteSnapshot): Observable<any> {
const resolve = future._resolve;
return this.resolveNode(resolve.current, future).map(resolvedData => {
resolve.resolvedData = resolvedData;
future.data = merge(future.data, resolve.flattenedResolvedData);
return null;
});
}
private resolveNode(resolve: ResolveData, future: ActivatedRouteSnapshot): Observable<any> {
const resolvingObs: Observable<any>[] = [];
const resolvedData: {[k: string]: any} = {};
forEach(resolve, (v: any, k: string) => {
const resolver = this.injector.get(v);
const obs = resolver.resolve ? wrapIntoObservable(resolver.resolve(future, this.future)) :
wrapIntoObservable(resolver(future, this.future));
resolvingObs.push(obs.map((_: any) => { resolvedData[k] = _; }));
});
if (resolvingObs.length > 0) {
return Observable.forkJoin(resolvingObs).map(r => resolvedData);
} else {
return of (resolvedData);
}
}
}
function wrapIntoObservable<T>(value: T | Observable<T>): Observable<T> {
@ -492,7 +545,6 @@ class ActivateRoutes {
activate(parentOutletMap: RouterOutletMap): void {
const futureRoot = this.futureState._root;
const currRoot = this.currState ? this.currState._root : null;
pushQueryParamsAndFragment(this.futureState);
advanceActivatedRoute(this.futureState.root);
this.activateChildRoutes(futureRoot, currRoot, parentOutletMap);

46
modules/@angular/router/src/router_state.ts
View File

@ -10,10 +10,10 @@ import {ComponentFactory, Type} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import {Route} from './config';
import {Data, ResolveData, Route} from './config';
import {PRIMARY_OUTLET, Params} from './shared';
import {UrlPathWithParams, UrlSegment, UrlTree} from './url_tree';
import {shallowEqual, shallowEqualArrays} from './utils/collection';
import {merge, shallowEqual, shallowEqualArrays} from './utils/collection';
import {Tree, TreeNode} from './utils/tree';
@ -49,10 +49,11 @@ export function createEmptyState(urlTree: UrlTree, rootComponent: Type): RouterS
const snapshot = createEmptyStateSnapshot(urlTree, rootComponent);
const emptyUrl = new BehaviorSubject([new UrlPathWithParams('', {})]);
const emptyParams = new BehaviorSubject({});
const emptyData = new BehaviorSubject({});
const emptyQueryParams = new BehaviorSubject({});
const fragment = new BehaviorSubject('');
const activated =
new ActivatedRoute(emptyUrl, emptyParams, PRIMARY_OUTLET, rootComponent, snapshot.root);
const activated = new ActivatedRoute(
emptyUrl, emptyParams, emptyData, PRIMARY_OUTLET, rootComponent, snapshot.root);
activated.snapshot = snapshot.root;
return new RouterState(
new TreeNode<ActivatedRoute>(activated, []), emptyQueryParams, fragment, snapshot);
@ -60,10 +61,12 @@ export function createEmptyState(urlTree: UrlTree, rootComponent: Type): RouterS
function createEmptyStateSnapshot(urlTree: UrlTree, rootComponent: Type): RouterStateSnapshot {
const emptyParams = {};
const emptyData = {};
const emptyQueryParams = {};
const fragment = '';
const activated = new ActivatedRouteSnapshot(
[], emptyParams, PRIMARY_OUTLET, rootComponent, null, urlTree.root, -1);
[], emptyParams, emptyData, PRIMARY_OUTLET, rootComponent, null, urlTree.root, -1,
InheritedResolve.empty);
return new RouterStateSnapshot(
'', new TreeNode<ActivatedRouteSnapshot>(activated, []), emptyQueryParams, fragment);
}
@ -93,7 +96,7 @@ export class ActivatedRoute {
*/
constructor(
public url: Observable<UrlPathWithParams[]>, public params: Observable<Params>,
public outlet: string, public component: Type|string,
public data: Observable<Data>, public outlet: string, public component: Type|string,
futureSnapshot: ActivatedRouteSnapshot) {
this._futureSnapshot = futureSnapshot;
}
@ -103,6 +106,25 @@ export class ActivatedRoute {
}
}
export class InheritedResolve {
/**
* @internal
*/
resolvedData = {};
constructor(public parent: InheritedResolve, public current: ResolveData) {}
/**
* @internal
*/
get flattenedResolvedData(): Data {
return this.parent ? merge(this.parent.flattenedResolvedData, this.resolvedData) :
this.resolvedData;
}
static get empty(): InheritedResolve { return new InheritedResolve(null, {}); }
}
/**
* Contains the information about a component loaded in an outlet at a particular moment in time.
*
@ -131,16 +153,20 @@ export class ActivatedRouteSnapshot {
/** @internal */
_lastPathIndex: number;
/** @internal */
_resolve: InheritedResolve;
/**
* @internal
*/
constructor(
public url: UrlPathWithParams[], public params: Params, public outlet: string,
public component: Type|string, routeConfig: Route, urlSegment: UrlSegment,
lastPathIndex: number) {
public url: UrlPathWithParams[], public params: Params, public data: Data,
public outlet: string, public component: Type|string, routeConfig: Route,
urlSegment: UrlSegment, lastPathIndex: number, resolve: InheritedResolve) {
this._routeConfig = routeConfig;
this._urlSegment = urlSegment;
this._lastPathIndex = lastPathIndex;
this._resolve = resolve;
}
toString(): string {
@ -191,6 +217,7 @@ export function advanceActivatedRoute(route: ActivatedRoute): void {
if (route.snapshot) {
if (!shallowEqual(route.snapshot.params, route._futureSnapshot.params)) {
(<any>route.params).next(route._futureSnapshot.params);
(<any>route.data).next(route._futureSnapshot.data);
}
if (!shallowEqualArrays(route.snapshot.url, route._futureSnapshot.url)) {
(<any>route.url).next(route._futureSnapshot.url);
@ -198,5 +225,6 @@ export function advanceActivatedRoute(route: ActivatedRoute): void {
route.snapshot = route._futureSnapshot;
} else {
route.snapshot = route._futureSnapshot;
(<any>route.data).next(route._futureSnapshot.data);
}
}