Skip to content

Commit 491373f

Browse files
committed
feat:uiRouterConfig Add StatesModule to config callback.
We want to support multilingual urls and hence we want to defer the url to state binding to be done at runtime rather than being performed statically. Imagine we have a sitemap service which retrieves the urls per states e.g.: ```javascript { 'en': [ {'module': 'app.home', 'path': ''}, {'module': 'app.about', 'path': '/about'}, ], 'sv': [ {'module': 'app.home', 'path': ''}, {'module': 'app.about', 'path': '/om'} ] } ``` we want to wire the state `app.home` and `app.about` to `/en` and `/en/about` when the language is `en` and '/sv' and '/sv/om' when the language is '/sv'. Looking at `UIRouter.forRoot` or `UIRouter.forChild` there is a `options.config` which could allow us to enable this behaviour which is called from the `applyModuleConfig` method: ```javascript function applyModuleConfig(uiRouter, injector, options) { if (options === void 0) { options = {}; } if (isFunction(options.config)) { options.config(uiRouter, injector); } var states = options.states || []; states.forEach(function (state) { return uiRouter.stateRegistry.register(state); }); } ``` What is stopping us from using this hook is the fact that `options.config` only takes `uiRouter` and `injector` as arguments. Adding `options` (module) as a third parameter will allow us to achieve deferred route configuration. ```javascript export function applyModuleConfig(uiRouter: UIRouter, injector: Injector, options: StatesModule = {}) { if (isFunction(options.config)) { options.config(uiRouter, injector, options); } let states = options.states || []; states.forEach(state => uiRouter.stateRegistry.register(state)); } ``` ## Example As an example of how this would work have a look at the [ui-router-multilingual project](https://github.com/cloudmark/ui-router-multilingual) To run the project: > npm install > npm start.deving Open the browser and goto http://localhost:5555/en and hover on the links HOME and ABOUT. - HOME should point to /en/ - ABOUT should point to /en/about Open the browser and goto http://localhost:5555/sv and hover on the links HOME and ABOUT. - HOME should point to /sv/ - ABOUT should point to /sv/om Opening directly the link http://localhost:5555/ will default to english. To configure multilingual modules we would setup the `forChild` and `forRoot` we would add the `uiRouterConfigureSitemap` config function e.g. ```javascript @NgModule({ imports: [CommonModule, UIRouterModule.forChild({ states:CHILD_STATES, config: uiRouterConfigureSitemap })], declarations: [AboutComponent], exports: [AboutComponent] }) export class AboutModule { } ``` The config function is simple: ```javascript export function uiRouterConfigureSitemap(router: UIRouter, injector: Injector, module: StatesModule) { let states: ExtNg2StateDeclaration[] = <ExtNg2StateDeclaration[]>module.states; // Process the states; let filteredStates: ExtNg2StateDeclaration[] = _.filter(states, (s) => { return s.future && !s._complete }); _.map(filteredStates, (s) => { let sitemapObj:any = _.find(getSitemap(), (sitemap:any) => sitemap.module == s.name); console.log(`Retrieved ${s.name} from sitemap ${sitemapObj.path}`); // Set the url from the sitemap object s.url = sitemapObj.path; s._complete = true; }); router.urlService.config.strictMode(false); } ```
1 parent 7b70b4a commit 491373f

File tree

2 files changed

+3
-3
lines changed

2 files changed

+3
-3
lines changed

src/uiRouterConfig.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {isDefined} from "ui-router-core";
66

77
export function applyModuleConfig(uiRouter: UIRouter, injector: Injector, options: StatesModule = {}) {
88
if (isFunction(options.config)) {
9-
options.config(uiRouter, injector);
9+
options.config(uiRouter, injector, options);
1010
}
1111

1212
let states = options.states || [];

src/uiRouterNgModule.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ export interface StatesModule {
200200
* import { requireAuthHook } from "./requireAuthHook";
201201
* import { MyService } from "./myService";
202202
*
203-
* export function configureMyModule(uiRouter: UIRouter, injector: Injector) {
203+
* export function configureMyModule(uiRouter: UIRouter, injector: Injector, options: StatesModule) {
204204
* // Get UIRouter services off the UIRouter object
205205
* let urlConfig = uiRouter.urlService.config;
206206
* let transitionService = uiRouter.transitionService;
@@ -228,6 +228,6 @@ export interface StatesModule {
228228
* class MyModule {}
229229
* ```
230230
*/
231-
config?: (uiRouterInstance: UIRouter, injector: Injector) => any;
231+
config?: (uiRouterInstance: UIRouter, injector: Injector, options: StatesModule) => any;
232232
}
233233

0 commit comments

Comments
 (0)