AngularJS : UI-router setting configurations using directives -

i understand configuration settings ui-router , working fine. trying move following configuration directives. that, length of code reduced in js file. may be, poor design want achieve :)

current configuration (as per ui-router design)

//router configuration angular.module('myapp', ['ui.router']).config(function($stateprovider) {   $stateprovider.state('addcustomer', {     url: "/addcustomer",     templateurl: 'views/customer/add_customer.html',     controller: 'addcustomercontroller'   });    ...no of configuration, list big... });    //in template <a ui-sref="addcustomer">add customer</a> 

what trying change

//router configuration angular.module('myapp', ['ui.router']).config(function($stateprovider) {  });    //in template <a ui-sref="addcustomer" router-info="{'url':'/addcustomer', 'templateurl':'views/customer/add_customer.html', 'controller':'addcustomercontroller'}">add customer</a>  //directive- dynamic routing angular.module('myapp').directive('routerinfo', function(){     var directive = {};     directive.restrict = 'a';      directive.compile = function(element, attributes) {          var linkfunction = function($scope, element, attributes) {             //here understand, can not inject stateprovider. kindly suggest other way             //$stateprovider.state(attributes.uisref, attributes.routerinfo);         }          return linkfunction;     }      return directive; }); 

how add ui-router configuration directives? there api available set? or other better way handle this... intention reduce code in config block.

if you're trying avoid having 1 giant config block, use multiple config blocks , put each 1 in own file. there's no reason not put configuration code in config block, sounds need approach better way, split smaller blocks.

example:

// config/routes/user.routes.js  angular.module('yourmodule') .config([   '$stateprovider',   function($stateprovider) {      $stateprovider     .state('user', {       url: '/users/:username',       abstract: true,       // etc     })     .state('user.main', {       url: '',       //etc     })     .state('user.stuff', {       url: '/stuff',       // etc     })     ;    } ]) ; 

and repeat each set of routes:

// config/routes/more.routes.js  angular.module('yourmodule') .config([   '$stateprovider',   function($stateprovider) {      $stateprovider     .state('more', {       url: '/more-routes',       //etc     })     ;    } ]) ;