angular ui router state - multiple states with same template and controller

Question

I have states defined as below in my angularjs app using angular ui router state provider. And, I would like to define multiple states with the same configuration ie. with the same template and controller.

$stateProvider
        .state('parent', {
            templateUrl: 'parent.html',
            abstract: true,
            parent: 'apm'
        })
        .state('parent.list', {
            abstract: true,
            url: '/list',
            templateUrl: 'list.html',
            controller: 'ListCtrl'
        })

        .state('parent.list.closed', {
        url: '/q',
        templateUrl: 'closed.html'
        })

        .state('parent.list.details', {   // would like to have same template, controller on different state parent.details without list
            url: '/:id/:name',
            abstract: true,
            templateUrl: 'details.html',
            controller: 'DetailsCtrl',
            resolve: {
                .....
                .....
            }
        })
        .state('parent.list.details.data', { // would like to have same template, controller on different state parent.details.data without list
          url: '/details',
          views : {
            'view1' : {
              templateUrl : 'view1.html'
            },
            'view2' : {
              templateUrl : 'view2.html',
              controller : 'View2Ctrl'
            },
            'view3' : {
              templateUrl : 'view3.html'
            },
            'view4' : {
              templateUrl : 'view4.html'
            }
          }
        })

Is it possible to do something like

.state(['parent.list.details', 'parent.details'], {   
            url: '/:id/:name',
            abstract: true,
            templateUrl: 'details.html',
            controller: 'DetailsCtrl',
            resolve: {
                .....
                .....
            }
        })

Any help or suggestions?

why don't you extract the common options to a plain javascript variable or even an angular constant? I guess you're doing to dry up sake, right? — goreorto
– goreorto, Commented Mar 13, 2015 at 23:28

Jacob Carter · Accepted Answer · 2015-03-13 23:23:03Z

7

Each state needs to be defined in it's own .state() method. You will run into multiple problems trying to do it the way you listed above. Most importantly would be the url.

You can simply do this:

    .state('parent.list', {   
        url: '/list',
        abstract: true,
        templateUrl: 'details.html',
        controller: 'DetailsCtrl',
        resolve: {
            .....
            .....
        }
    .state('parent.list.details', {   
        url: '/:id/:name',
        abstract: true,
        templateUrl: 'details.html',
        controller: 'DetailsCtrl',
        resolve: {
            .....
            .....
        }
    })

While the code is not condensed or efficient in the sense you have to declare the controller and partial used on each state, it is necessary because each state needs its own .state() method

answered Mar 13, 2015 at 23:23

Jacob Carter

7115 silver badges12 bronze badges

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

3 Comments

user3701057 Over a year ago

Thanks for the quick response. My only concern was to repeat bunch of lines of code for the new states I want.

Jacob Carter Over a year ago

Yeah like I was saying it isn't the most efficient but because uiRouter requires the .state() method to be declared for each state I don't see a way around it. Here is a quote direct from uiRouter's wiki _ "States often have things in common, and the primary way of factoring out these commonalities in this model is via the state hierarchy, i.e. parent/child states aka nested states."

89neuron Over a year ago

if same controller is bind with different states, then the functions that execute on bind like: getting list from server will be called again and again, that is what I am in problem now. What could be a possible solution?

Tobias Koller · Accepted Answer · 2016-01-22 15:47:46Z

3

I wanted the same and made it like this:

//add a new Function to the object $stateProvider
               $stateProvider.states = (statesArr, obj) => {

                   for (var i in statesArr) {
                       var state = statesArr[i];

                       $stateProvider.state(state, obj);
                   }

                   return $stateProvider;
               };


//use the new function
               $stateProvider

               .states(["main", "main.test"], {
                   url: '/main',
                   templateUrl: 'modules/ViewContainer.html',
                   controllerAs: 'currentCtrl',
                   controller: 'MainCtrl'
               })

answered Jan 22, 2016 at 15:47

Tobias Koller

2,2165 gold badges30 silver badges48 bronze badges

1 Comment

dam1 Over a year ago

work great, i had to clone the state object to make it work with $state.go('^.mystate'); example with underscore : $stateProvider.state(state, _.clone(obj));

Collectives™ on Stack Overflow

angular ui router state - multiple states with same template and controller

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related