create @StateConfig

We need to register states for component via @StateConfig similar like ng-forward does

API:

@StateConfig will provide all options which has uiRouter for $stateParams except those, which can be injectable. Injectable needs to be provided by child component which also makes sense to encapsulate those things together, because they are related.

property	description
name	unique state name
url	A url fragment with optional parameters.
component	Reference to Child component which should be activated on this state
template?	will override component.selector to custom template
templateUrl?	will override component.selector to custom template
parent?	uiRouter specific
views?	uiRouter named views
abstract?	uiRouter abstractState
reloadOnSearch?	uiRouter specific
params?	uiRouter specific

How to resolve:

because resolve can be injectable, define static methods on your child component with @Resolve method decorator.

You shouldn’t be using resolve anyway!

so you can end up with

@Component({})
class Child{

  @Resolve()
  static boo(){}

  @Resolve()
  static usesDi(@Inject('$http') $http){ return $http.get('/get/me'); }

 // and you can get those values from $state
  constructor(@Inject('$state') $state) {

       // get resolve property
        const {boo, usesDi} = $state.$current.locals;

    }

}

which will transform to:

Child.resolve = { 
  boo: function(){},
 // this is properly annotated via $inject, behind the scenes
  usesDi: function($http){ return $http.get('/get/me'); }
}

and this will be used on parent stateConfig creation

How to onExit | onEnter:

because onEnter,onExit can be injectable, implement OnExit,OnEnter interface on your child component and use `@Inject if there are any Injectables. see #28 for more

Example

import { Component, StateConfig, provide, makeDirective } from 'ng-metadata/ng-metadata';
import * as angular from 'angular';
import * as uiRouter from 'ui-router';

@Component({
    selector: 'child-a',
    template: '{{ ctrl.text }}' // will be 'A resolved!'
})
class ChildA {

    text: string;

   @Resolve()
   static resolveA() {
        return 'A resolved!';
    }

    constructor(@Inject('$state') $state) {

       // get resolve property
        this.text = $state.$current.locals.resolveA;

    }

}

@Component({
    selector: 'child-z',
    template: 'Im child Z '
})
class ChildZ {}

@Component({
    selector: 'parent',
    template: `<ui-view></ui-view>`
})
@StateConfig([
    { name: 'childA', url: '/childA', component: ChildA },
    { name: 'childZ', url: '/childZ', component: ChildZ }
])
class Parent {}


angular.module('app',[uiRouter])
  .config(provide(Parent))
  .directive(provide(Parent), makeDirective(Parent))
  .directive(provide(ChildA), makeDirective(ChildA))
  .directive(provide(ChildZ), makeDirective(ChildZ));

[Hotell]

may I propose following changes to your implementation?:

I would name it State instead of RouteConfig -> RouteConfig is used by Angular 2 component router, and uiRouter operates in States so it will be less confusing. Otherwise looks good. Maybe you should publish that as separate package, wdyt?

[aciccarello]

I agree it should be in a separate package. I’ve created aciccarello/ui-router-decorator to start using the name StateConfig. Still have a lot of work to do and I haven’t had much experience developing open source so the work is slow going. But thanks for the feedback.