CODEWITHSUNDEEP
angularjs
user3701057
user3701057

Reputation: 395

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

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?

Upvotes: 8

Views: 7131

Answers (2)

Tobias Koller
Tobias Koller

Reputation: 2186

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'
               })

Upvotes: 3

Jacob Carter
Jacob Carter

Reputation: 711

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

Upvotes: 7

Related Questions