更新單個視圖，其中有很多AngularJs和UI-路由器

Question

我是Angular的n00b，並試圖讓我的頭瞭解ui路由如何工作。我看到了多條路線的概念如何工作，以及嵌套路線如何工作。我會怎麼做？或者這是不是很好的做法？

在這個例子中波紋管我應用程序/ WH工作正常，但是當一些去我只想要中間視圖交換應用程序/ WH/TOC/123。

.state('app.wh', { 
       url: "/wh", 
       views: { 
        'left' : { 
         templateUrl: "static/partials/leftPane.html" 
        }, 
        'middle': { 
         templateUrl: "static/partials/start.html" 
        }, 
        'right' : { 
         templateUrl: "static/partials/rightPane.html", 
         controller: 'AsideCtrl' 
        } 
       } 

      }) 

      .state('app.wh.toc', { 
       url: "/toc/:id", 

       views: { 
        'middle' : { 
         templateUrl: "static/partials/toc.html", 
         controller: function($scope, $stateParams, $state){ 
          $scope.title = $stateParams.id; 
         } 
        } 
       } 



      }) 

Answer 1

我猜你希望你的左右面板保持靜態而中間內容通過用戶動作改變。就我個人而言，我不喜歡使用多種路線，如果我想將單個視圖的各個部分分隔成自己的文件，只需使用ng-include即可。

如果你這樣做，那麼你只需要定義你的父母和孩子的狀態：

.state('app.wh', url: '/wh', abstract: true, controller: ... 

請注意，如果你想爲左，右，你可以在你的視圖使用ng-controller單獨的控制器。此外，如果這種狀態對於多箇中間內容來說很常見，那麼您可能希望將其設置爲抽象狀態，以便用戶無法實際加載它（它僅充當父級佔位符）。

.state('app.wh.toc', url: /toc/:id ... 

然後在您的視圖：

<div ng-include="someUrlRefLeft"></div> 
<div ui-view=""></div> 
<div ng-include="someUrlRefRight"></div>