ng2 | UI-Router
Options
All
  • Public
  • Public/Protected
  • All
Menu

External module ng2

UI-Router for Angular 2

For the quick start repository, please see http://github.com/ui-router/quickstart-ng2

Getting started:

  • Use npm. Add a dependency on latest ui-router-ng2
  • Import UI-Router classes directly from "ui-router-ng2"
import {StateRegistry} from "ui-router-ng2";

import {UIRouter} from "ui-router-ng2";
import {INITIAL_STATES} from "./app.states";
@ Injectable()
export class MyUIRouterConfig {
  configure(uiRouter: UIRouter) {
    INITIAL_STATES.forEach(function(state) {
      uiRouter.stateRegistry.register(state));
    });
  }
}

import {provide} from "@angular/core";
import {bootstrap} from 'angular2/platform/browser';
import {UIRouterConfig, UIView, UIROUTER_PROVIDERS} from "ui-router-ng2";
import {MyUIRouterConfig} from "./router.config";

bootstrap(UIView, [
    ...UIROUTER_PROVIDERS,
    provide(UIRouterConfig, { useClass: MyUIRouterConfig })
]);

Index

Modules

Classes

Interfaces

Variables

Functions

Variables

NG2_INJECTOR_TOKEN: OpaqueToken
UIROUTER_PROVIDERS: Provider[]

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

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

deprecated

use UIRouterModule and provideUIRouter

UIROUTER_STATES_TOKEN: OpaqueToken
_UIROUTER_INSTANCE_PROVIDERS: Provider[]
_UIROUTER_PROVIDERS: Provider[]
id: number
splitOnEquals: (Anonymous function)
splitOnHash: (Anonymous function)
splitOnQuestionMark: (Anonymous function)

Functions

  • UIRouterModule(moduleMetaData: UIRouterModuleMetadata): (Anonymous function)

  • Declares a NgModule with UI-Router states

  • Declares a NgModule with UI-Router states

    A Typescript decorator for declaring an NgModule which contains UI-Router states and/or uses UI-Router directives and providers.

    The decorator adds the UIRouterLibraryModule NgModule as an import. The `UIRouterLibraryModule has the UI-Router directives and providers.

    The decorator also analyzes the states: property. When it finds a state with a routed component:, it adds the component to the module's declarations and entryComponents.

    Note: adding the component to entryComponents instructs the Module Compiler that those components should be compiled. Otherwise, they would not be automatically discovered as "reachable" by the compiler.

    Further, the states found in the states: property are added to Dependency Injection using a specific token. This will automatically register them with the StateRegistry when the application bootstraps.

    example
    
var homeState = { name: 'home', url: '/home', component: Home };
var aboutState = { name: 'about', url: '/about', component: About };

@ UIRouterModule({
  imports: [ BrowserModule ],
  declarations: [ NonRoutedComponent ],
  states: [ homeState, aboutState ]
}) export class AppModule {};

    Note: the UIRouterModule decorator creates a standard Angular 2 NgModule. The equivalent AppModule could also be crafted by hand using only the NgModule decorator:

    var homeState = { name: 'home', url: '/home', component: Home };
var aboutState = { name: 'about', url: '/about', component: About };

@ NgModule({
  imports: [BrowserModule, UIRouterLibraryModule],
  declarations: [NonRoutedComponent, Home, About],
  entryComponents: [Home, About],
  providers: [
   { provide: UIROUTER_STATES_TOKEN, useValue: [homeState, aboutState], multi: true }
  ]
}) export class AppModule {};

    Parameters

    • moduleMetaData: UIRouterModuleMetadata
      : 
         (See also [NgModuleMetadataType](https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html)

    Returns (Anonymous function)

  • loadNgModule(path: string): function

  • Returns a function which lazy loads a nested module

  • Returns a function which lazy loads a nested module

    Use this function as a StateDeclaration.lazyLoad property to lazy load a state tree (an NgModule).

    Parameters

    • path: string
      :

      the path to the module source code.

    Returns function

    :

    A function which takes a transition, then:

    • Gets the Injector (scoped properly for the destination state)
    • Loads and creates the NgModule
    • Finds the "replacement state" for the target state, and adds the new NgModule Injector to it (as a resolve)

    returns the new states array

  • This is a StateBuilder.builder function which enables lazy Ng2Module support.

    See loadNgModule

    After lazy loading an NgModule, any Components from that module should be created using the NgModule's Injecjtor. The NgModule's ComponentFactory only exists inside that Injector.

    After lazy loading an NgModule, it is stored on the root state of the lazy loaded state tree. When instantiating Component, the parent Component's Injector is merged with the NgModule injector.

    Parameters

    • state: State
    • parentFn: Function

    Returns Resolvable[]

  • provideUIRouter(rootConfig?: object): Array<TypeProvider | ValueProvider | ClassProvider | ExistingProvider | FactoryProvider | Array<any>>

  • Provides an Instance of UI-Router for NG2.

  • Provides an Instance of UI-Router for NG2.

    Use this on the root NgModule to configure and create an instance of the Angular 2 UIRouter.

    example
    
@ UIRouterModule({
  states: [ homeState, aboutState ],
  providers: [ provideUIRouter({ configClass: MyUIRouterConfig, useHash: true }) ],
  bootstrap: [ UIView ]
}) class RootNgModule {}

platformBrowserDynamic().bootstrapModule(RootNgModule);

    Note: UIRouter should only be provided once, on the root module, when bootstrapping the application.

    Parameters

    • rootConfig Default value: object = {}

    Returns Array<TypeProvider | ValueProvider | ClassProvider | ExistingProvider | FactoryProvider | Array<any>>

  • This is a factory function for a UIRouter instance

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

    Parameters

    Returns UIRouter

Generated using TypeDoc