Skip to content

Commit 9aae71a

Browse files
feat(UIRouterConfig): Use a simple function to configure module instead of an injectable class
BREAKING CHANGE: You no longer configure a module using an Injectable `UIRouterConfig` class. Now you use a function that receives the `UIRouter` and the `Injector` In 1.0.0-beta.3 you might have a config class like this: ```js export class MyUIRouterConfig { constructor(@Inject(UIRouter) router: UIRouter, @Inject(SomeService) myService: SomeService) { // do something with router and injected service } } which was wired into the root module like this: ```js @NgModule({ imports: [ UIRouterModule.forRoot({ configClass: MyUIRouterConfig }) ] }) export class AppModule {} ``` In 1.0.0-beta.4 you should switch to a simple function. The function receives the router: `UIRouter` and injector: `Injector` ```js export function configureModule(router: UIRouter, injector: Injector) { // do something with router router.urlService.rules.type('slug', slugParamType); // inject other services const myService: SomeService = injector.get(SomeService); // do something injected service myService.init(); } ``` which is now wired using `config: configureModule` instead of `configClass: ...` ```js @NgModule({ imports: [ UIRouterModule.forRoot({ configClass: MyUIRouterConfig }) ] }) export class AppModule {} ```
1 parent 3120bf1 commit 9aae71a

File tree

2 files changed

+33
-31
lines changed

2 files changed

+33
-31
lines changed

src/uiRouterConfig.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/** @module ng2 */ /** */
2-
import {UIRouter} from "ui-router-core";
2+
import { UIRouter, isFunction } from "ui-router-core";
33
import {StatesModule, RootModule} from "./uiRouterNgModule";
44
import {Injector} from "@angular/core";
55
import {isDefined} from "ui-router-core";
66

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

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

src/uiRouterNgModule.ts

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
/** */
33
import { Ng2StateDeclaration } from "./interface";
44
import {
5-
NgModule, OpaqueToken, ModuleWithProviders, ANALYZE_FOR_ENTRY_COMPONENTS, Provider, Type
5+
NgModule, OpaqueToken, ModuleWithProviders, ANALYZE_FOR_ENTRY_COMPONENTS, Provider, Injector
66
} from "@angular/core";
77
import { CommonModule, LocationStrategy, HashLocationStrategy, PathLocationStrategy } from "@angular/common";
88
import { _UIROUTER_DIRECTIVES } from "./directives/directives";
99
import { UIView } from "./directives/uiView";
10-
import { UrlRuleHandlerFn, TargetState, TargetStateDef } from "ui-router-core";
10+
import { UrlRuleHandlerFn, TargetState, TargetStateDef, UIRouter } from "ui-router-core";
1111
import { _UIROUTER_INSTANCE_PROVIDERS, _UIROUTER_SERVICE_PROVIDERS } from "./providers";
1212

1313
// import { ROUTES } from "@angular/router/src/router_config_loader";
@@ -189,43 +189,45 @@ export interface StatesModule {
189189
/**
190190
* A UI-Router Module's imperative configuration
191191
*
192-
* If a UI-Router Module needs to perform some configuration (such as registering parameter types or Transition Hooks)
193-
* a `configClass` should be supplied.
192+
* If a UI-Router Module needs to perform some configuration (such as registering
193+
* parameter types or Transition Hooks) a `configFn` should be supplied.
194+
* The function will be passed the `UIRouter` instance and the module's `Injector`
194195
*
195-
* Mark the class as `@Injectable()` and inject any required dependencies.
196-
* When the module is being loaded, an instance will be created and injected.
197-
*
198-
* Example:
196+
* #### Example:
199197
* ```js
200-
* @Injectable()
201-
* export class MyUIRouterConfig {
202-
* // The constructor may be injected
203-
* constructor(uiRouter: UIRouter) {
204-
* const requireAuthentication = (transition: Transition) => {
205-
* let injector = transition.injector();
206-
* if (!injector.get(AuthService).isAuthenticated()) {
207-
* return uiRouter.stateService.target('login');
208-
* }
209-
* }
210-
*
211-
* uiRouter.transitionService.onBefore({ to: (state) => state.requiresAuth }, requireAuthentication);
212-
*
213-
* let builtInStringType = urlMatcherFactory.type('string');
214-
* let slugType = Object.assign({}, builtInStringType, { encode: (str) => str, decode: (str) => str });
215-
* uiRouter.urlMatcherFactory.type('slug', slugType);
216-
* }
198+
* import { Injector } from "@angular/core";
199+
* import { UIRouter } from "ui-router-ng2";
200+
* import { requireAuthHook } from "./requireAuthHook";
201+
* import { MyService } from "./myService";
202+
*
203+
* export function configureMyModule(uiRouter: UIRouter, injector: Injector) {
204+
* // Get UIRouter services off the UIRouter object
205+
* let urlConfig = uiRouter.urlService.config;
206+
* let transitionService = uiRouter.transitionService;
207+
* uiRouter.trace.enable("TRANSITION");
208+
*
209+
* transitionService.onBefore({ to: (state) => state.requiresAuth }, requireAuthHook);
210+
*
211+
* // Create a slug type based on the string type
212+
* let builtInStringType = urlConfig.type('string');
213+
* let slugType = Object.assign({}, builtInStringType, { encode: (str) => str, decode: (str) => str });
214+
* urlConfig.type('slug', slugType);
215+
*
216+
* // Inject arbitrary services from DI using the Injector argument
217+
* let myService: MyService = injector.get(MyService)
218+
* myService.useFastMode();
217219
* }
218220
* ```
219221
*
220222
* ```js
221223
* @NgModule({
222224
* imports: [
223-
* UIRouterModule.forChild({ states: STATES, configClass: MyUIRouterConfig });
225+
* UIRouterModule.forChild({ states: STATES, config: configureMyModule });
224226
* ]
225227
* })
226228
* class MyModule {}
227229
* ```
228230
*/
229-
configClass?: Type<any>;
231+
config?: (uiRouterInstance: UIRouter, injector: Injector) => any;
230232
}
231233

0 commit comments

Comments
 (0)