eckig ui router state - mehrere states mit der gleichen Vorlage und controller

Question

Ich habe Staaten wie unten in meiner angularjs App mit eckigen ui Router State Provider definiert. Und ich würde gerne mehrere Zustände mit der gleichen Konfiguration definieren, dh. mit der gleichen Vorlage und 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' 
      } 
      } 
     }) 

Ist es möglich, so etwas wie

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

Jede Hilfe oder Anregungen zu tun?

Answer 1

Jeder Status muss in seiner eigenen .state() Methode definiert werden. Sie werden mehrere Probleme haben, wenn Sie versuchen, es so zu tun, wie Sie oben aufgelistet haben. Am wichtigsten wäre die URL.

Sie können dies einfach tun:

.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: { 
      ..... 
      ..... 
     } 
    }) 

Während der Code nicht kondensiert oder effizient in dem Sinne, Sie auf jeden Zustand der Steuerung und teilweise gebrauchte zu erklären haben, ist es notwendig, da jeder Staat seine eigenen Bedürfnisse .state() Methode

Answer 2

wollte ich gleich und machte es wie folgt aus:

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