AngularJS : UI-router setting configurations using directives

Question

I understand the configuration settings for UI-router and it is working fine. Now I am trying to move the following configuration to directives. So that, the length of code will be reduced in js file. May be, it is poor design but I want to achieve this :)

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 is very big...
});  

//In Template
<a ui-sref="addCustomer">Add Customer</a>

What I am trying to 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 I understand, I can not inject stateprovider. So kindly suggest any other way to do this
            //$stateProvider.state(attributes.uiSref, attributes.routerInfo);
        }

        return linkFunction;
    }

    return directive;
});

How to add UI-router configuration from directives? Is there any API available to set? or any other better way to handle this... My intention is to reduce code in config block.

m59 · Accepted Answer · 2014-11-12 07:42:35Z

1

If you're trying to avoid having one giant config block, simply use multiple config blocks and put each one in its own file. There's no reason not to put configuration code in a config block, it just sounds like you need to approach it a better way, so split it up into 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 for each set of routes:

// config/routes/more.routes.js

angular.module('yourModule')
.config([
  '$stateProvider',
  function($stateProvider) {

    $stateProvider
    .state('more', {
      url: '/more-routes',
      //etc
    })
    ;

  }
])
;

answered Nov 12, 2014 at 7:42

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Asik Over a year ago

yes, right now, I have the configuration based on module specific (each module has seperate config in seperate file) but still its size is going big.

m59 Over a year ago

@Asik are you sure you understood what I'm saying? You can use as many config blocks as you want. It's only as big as you make it. You can use 1000 per module if you wanted..

Asik Over a year ago

Yes understood..My application is big. So many navigation for each module...so that these configuration is going large even splitted...I dont want to split multiple config in a multiple file for a single module..

m59 Over a year ago

@Asik I'm sorry...what you're saying doesn't make any sense at all. You have to put the code somewhere. How would putting it in a directive be any different? That's just making more of a mess (and doesn't make a bit of sense to begin with). You really ought to just put similar groups of routes in a single block in a single file in a reasonable directory structure. There's nothing complex or hard to maintain about that.

Asik Over a year ago

I agree that following the patter which is ui-router providing is perfect but still my superiors want to reduce that code and want to set from presentation layer :)..we are trying different approaches and we will use it which one is preferred by superiors. thanks for your explanation!!!

|

Collectives™ on Stack Overflow

AngularJS : UI-router setting configurations using directives

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related