ngms-plugin-ui-router-states
v1.0.0-beta.0ngms-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.
Metadata
- MIT
- Whatever
- Vlad Rindevich
- released 3/13/2017