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?

Answer 1

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

Answer 2

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