ngms-plugin-ui-router-states v1.0.0-beta.0

ngms-plugin-ui-router-states

A plugin for ng-metasys adding support for angular-ui-router.

Installation

$ npm install ng-metasys ngms-plugin-ui-router-states --save

Usage

@States

@States is main decorator to work with this plugin. Append it to the module that will be your router fragment and add list of routes you want to implement.

import {Module} from 'ng-metasys';
import {States} from 'ngms-plugin-ui-router-states';
import {AppComponent} from './app-component'; 
import {AuthComponent} from './auth-component'; 

@Module()
@States([
  {name: 'app', url: '', abstract: true, component: AppComponent},
  {name: 'app.auth', url: '/auth', component: AuthComponent}
])
export class AppModule {}

This code is an equivalent for:

angular.module('AppModule', [])
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('app', {
        url: '',
        abstract: true,
        component: 'app'
      })
      .state('app.auth', {
        url: '/auth',
        component: 'auth'
      });
  }]);

@State

If you prefer to mark single component as a state, you can use @State decorator. Note: components should be injected to the module directly to the declarations section. Components in dependency modules will not be counted.

import {Component} from 'ng-metasys';
import {State} from 'ngms-plugin-ui-router-states';

@Component({
  selector: 'app',
  template: '<div></div>'
})
@State({
  name: 'app',
  url: '',
  abstract: true
})
export class AppComponent {}

It is an equivalent to the following code:

angular.module('AppModule')
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider
      .state('app', {
        url: '',
        abstract: true,
        component: 'app'
      })
  }])
  .component('app', {
    template: '<div></div>',
    controller: AppComponent
  });

Transition state hooks

angular-ui-router allows to make lifecycle hooks (onEnter, onExit, etc. ) that can be used to implement complex router behavior. This plugin provides set of transition state hooks decorators for static class methods for this purpose that can be applied for both module and component classes.

Note: this methods will be applied as callback to the state description object, so read the proper part of ui-router documentation.

import {Module} from 'ng-metasys';
import {OnEnter} from 'ngms-plugin-ui-router-states';
import {AppComponent} from './app-component'; 

@Module()
@States([
  {name: 'app', url: '', abstract: true, component: AppComponent},
])
export class AppModule {
  @OnEnter(AppComponent)
  static onAppEnter($transition$, $state$) {
    // implement transition hook
  }
}

This is an equivalent for the following code:

angular.module('AppModule', [])
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider
      .state('app', {
        url: '',
        abstract: true,
        component: 'app',
        onEnter: function onAppEnter($transition$, $state$) {
          
        }
      });
  }]);

You can use it with @State decorator:

import {Component} from 'ng-metasys';
import {State, OnEnter} from 'ngms-plugin-ui-router-states';

@Component({
  selector: 'app',
  template: '<div></div>'
})
@State({
  name: 'app',
  url: '',
  abstract: true
})
export class AppComponent {
  @OnEnter()
  static onEnter($transition$, $state$) {
    // implement transition hook
  }
}

It is an equivalent for:

angular.module('AppModule')
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider
      .state('app', {
        url: '',
        abstract: true,
        component: 'app',
        onEnter: function onEnter($transition$, $state$) {
          // implement transition hook
        }
      })
  }])
  .component('app', {
    template: '<div></div>',
    controller: AppComponent
  });

Or you can even use @States on module and transition hooks decorators in component.

Note: hooks defined in module is more preferable than hooks defined in component. So if you have defined onEnter hook in component and in module for this component, hook in component will be overloaded by hook in module.

License

Information about license can be found here.