From e7bedc2ddf2145d6dc6997cb09e16a88a2c37404 Mon Sep 17 00:00:00 2001 From: Chris Thielen Date: Sun, 14 Aug 2016 15:48:56 -0500 Subject: [PATCH] feat(ng2): Add @UIRouterModule decorator Closes #2922 --- packages/ng2/package.json | 2 +- src/ng2.ts | 1 + src/ng2/routerModule.ts | 62 +++++++++++++++++++++++++++++++++++++++ tsconfig.json | 1 + 4 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 src/ng2/routerModule.ts diff --git a/packages/ng2/package.json b/packages/ng2/package.json index a64045095..e1fe1f4aa 100644 --- a/packages/ng2/package.json +++ b/packages/ng2/package.json @@ -2,7 +2,7 @@ "name": "ui-router-ng2", "description": "State-based routing for Angular 2", "peerDependencies": { - "@angular/core": ">=2.0.0-rc.3" + "@angular/core": "^2.0.0-rc.5" }, "main": "ng2.js", "typings": "ng2.d.ts" diff --git a/src/ng2.ts b/src/ng2.ts index de2596a33..c449704a9 100644 --- a/src/ng2.ts +++ b/src/ng2.ts @@ -8,6 +8,7 @@ export * from "./core"; import "./justjs"; export * from "./ng2/interface"; +export * from "./ng2/routerModule"; export * from "./ng2/providers"; export * from "./ng2/location"; export * from "./ng2/directives/directives"; diff --git a/src/ng2/routerModule.ts b/src/ng2/routerModule.ts new file mode 100644 index 000000000..45651d926 --- /dev/null +++ b/src/ng2/routerModule.ts @@ -0,0 +1,62 @@ +import {Ng2StateDeclaration} from "./interface"; +import {NgModule, NgModuleMetadataType} from "@angular/core"; +import {UIROUTER_DIRECTIVES} from "./directives/directives"; +import {UIROUTER_PROVIDERS} from "./providers"; +import {UIView} from "./directives/uiView"; + +@NgModule({ + declarations: [UIROUTER_DIRECTIVES], + exports: [UIROUTER_DIRECTIVES], + entryComponents: [UIView], + providers: [UIROUTER_PROVIDERS] +}) +export class _UIRouterModule {} + +/** + * A module declaration lteral, including UI-Router states. + * + * This interface extends the NG2 [NgModuleMetadataType](https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html) + * by adding a `states` array. + */ +export interface UIRouterModuleMetadata extends NgModuleMetadataType { + states: Ng2StateDeclaration[] +} + +/** + * Declares a NgModule with UI-Router states + * + * A Typescript decorator for declaring a [NgModule](https://angular.io/docs/ts/latest/guide/ngmodule.html) + * which contains UI-Router states. + * + * This decorator analyzes the `states` in the module, and adds module `declarations` and `entryComponents` + * for all routed Components. + * + * @example + * ```js + * + * var homeState = { name: 'home', url: '/home', component: Home }; + * var aboutState = { name: 'about', url: '/about', component: About }; + * @UIRouterModule({ + * imports: [BrowserModule], + * states: [homeState, aboutState] + * }) export class AppModule {}; + * ``` + * + * @param moduleMetaData the [[UIRouterModuleMetadata]] + * (See also [NgModuleMetadataType](https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html) + */ +export function UIRouterModule(moduleMetaData: UIRouterModuleMetadata) { + let states = moduleMetaData.states || []; + let components = states.map(state => state.views || { $default: state }) + .map(viewObj => Object.keys(viewObj).map(key => viewObj[key].component)) + .reduce((acc, arr) => acc.concat(arr), []) + .filter(x => typeof x === 'function'); + + moduleMetaData.imports = (moduleMetaData.imports || []).concat(_UIRouterModule); + moduleMetaData.declarations = (moduleMetaData.declarations || []).concat(components); + moduleMetaData.entryComponents = (moduleMetaData.entryComponents || []).concat(components); + + return function(moduleClass) { + return NgModule(moduleMetaData)(moduleClass); + } +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 99a0ea756..f0b34bda9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,7 @@ "declaration": true, "sourceMap": true }, + "lib": [ "es2015", "dom" ], "exclude": [ "node_modules", "build",