ng2 | @uirouter/angular
Options
Menu

Module ng2

UI-Router for Angular (v2+)

Getting started:

  • Use npm. Add a dependency on latest @uirouter/angular
  • Import UI-Router classes directly from "@uirouter/angular"
import {StateRegistry} from "@uirouter/angular";

export let state1: Ng2StateDeclaration = {
  name: 'state1',
  component: State1Component,
  url: '/one'
}

export let state2: Ng2StateDeclaration = {
  name: 'state2',
  component: State2Component,
  url: '/two'
}

@ NgModule({
  imports: [
    SharedModule,
    UIRouterModule.forChild({ states: [state1, state2 ] })
  ],
  declarations: [
    State1Component,
    State2Component,
  ]
})
export class MyFeatureModule {}
  • Import a UIRouterModule.forRoot module into your application root NgModule
  • Either bootstrap a UIView component, or add a <ui-view></ui-view> viewport to your root component.
@ NgModule({
  imports: [
    BrowserModule,
    UIRouterModule.forRoot({ states: [ homeState ] }),
    MyFeatureModule,
  ],
  declarations: [
    HomeComponent
  ]
  bootstrap: [ UIView ]
})
class RootAppModule {}

browserPlatformDynamic.bootstrapModule(RootAppModule);

import {UIRouter} from "@uirouter/angular";

@ Injectable()
export class MyUIRouterConfig {
  // Constructor is injectable
  constructor(uiRouter: UIRouter) {
    uiRouter.urlMatcherFactory.type('datetime', myDateTimeParamType);
  }
}

Index

Classes

Variables

Functions

Variables

UIROUTER_PROVIDERS: Provider[] = _UIROUTER_INSTANCE_PROVIDERS.concat(_UIROUTER_SERVICE_PROVIDERS)

The UI-Router providers, for use in your application bootstrap

The UI-Router providers, for use in your application bootstrap

deprecated

use UIRouterModule.forRoot

_UIROUTER_INSTANCE_PROVIDERS: Provider[] = [{ provide: UIRouter, useFactory: uiRouterFactory, deps: [LocationStrategy, UIROUTER_ROOT_MODULE, UIROUTER_MODULE_TOKEN, Injector] },{ provide: UIView.PARENT_INJECT, useFactory: parentUIViewInjectFactory, deps: [StateRegistry]},]
_UIROUTER_SERVICE_PROVIDERS: Provider[] = [{ provide: StateService, useFactory: fnStateService, deps: [UIRouter]},{ provide: TransitionService, useFactory: fnTransitionService, deps: [UIRouter]},{ provide: UrlMatcherFactory, useFactory: fnUrlMatcherFactory, deps: [UIRouter]},{ provide: UrlRouter, useFactory: fnUrlRouter, deps: [UIRouter]},{ provide: UrlService, useFactory: fnUrlService, deps: [UIRouter]},{ provide: ViewService, useFactory: fnViewService, deps: [UIRouter]},{ provide: StateRegistry, useFactory: fnStateRegistry, deps: [UIRouter]},{ provide: UIRouterGlobals, useFactory: fnGlobals, deps: [UIRouter]},]
id: number = 0

Functions

  • applyModuleConfig(uiRouter: UIRouter, injector: Injector, module?: StatesModule): StateObject[]
  • applyRootModuleConfig(uiRouter: UIRouter, injector: Injector, module: RootModule): void
  • fnGlobals(r: any): any
  • fnStateRegistry(r: UIRouter): StateRegistry
  • fnStateService(r: UIRouter): StateService
  • fnTransitionService(r: UIRouter): TransitionService
  • fnUrlMatcherFactory(r: UIRouter): UrlMatcherFactory
  • fnUrlRouter(r: UIRouter): UrlRouter
  • fnUrlService(r: UIRouter): UrlService
  • fnViewService(r: UIRouter): ViewService

  • This is a StateBuilder.builder function for ngModule lazy loading in Angular.

    When the StateBuilder builds a [[State]] object from a raw StateDeclaration, this builder decorates the lazyLoad property for states that have a [[Ng2StateDeclaration.ngModule]] declaration.

    If the state has a [[Ng2StateDeclaration.ngModule]], it will create a lazyLoad function that in turn calls loadNgModule(loadNgModuleFn).

    Example:

    A state that has a ngModule

    var decl = {
  ngModule: () => System.import('./childModule.ts')
}

    would build a state with a lazyLoad function like:

    import { loadNgModule } from "@uirouter/angular";
var decl = {
  lazyLoad: loadNgModule(() => System.import('./childModule.ts')
}

    If the state has both a ngModule: and a lazyLoad, then the lazyLoad is run first.

    Example:

    var decl = {
  lazyLoad: () => System.import('third-party-library'),
  ngModule: () => System.import('./childModule.ts')
}

    would build a state with a lazyLoad function like:

    import { loadNgModule } from "@uirouter/angular";
var decl = {
  lazyLoad: () => System.import('third-party-library')
      .then(() => loadNgModule(() => System.import('./childModule.ts'))
}

    Parameters

    Returns function

      • (transition: Transition, state: StateDeclaration): Promise<StateDeclaration[]>

      • Parameters

        • transition Transition
        • state StateDeclaration

        Returns Promise<StateDeclaration[]>

  • ng2ViewsBuilder(state: StateObject): object

  • This is a StateBuilder.builder function for Angular views.

  • uiRouterFactory(locationStrategy: LocationStrategy, rootModules: RootModule[], modules: StatesModule[], injector: Injector): UIRouter

  • This is a factory function for a UIRouter instance

  • This is a factory function for a UIRouter instance

    Creates a UIRouter instance and configures it for Angular, then invokes router bootstrap. This function is used as an Angular useFactory Provider.

    Parameters

    Returns UIRouter

Generated using TypeDoc