在AngularJS UI-Router中創建視圖的最簡潔方法是什麼？

Question

我創造了這個應用程序：

var accolade = angular.module('accolade', [ 
    'ui.router', 
    'personControllers', 
    'personFactories' 
]); 

accolade.config(['$stateProvider', '$urlRouterProvider',  function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider. 
otherwise('/list'); 

$stateProvider.state('list', { 
    url: '/list', 
    resolve: { 
     headerFactory: function(headerFactory) { 
      return headerFactory; 
     } 
    }, 
    views: { 
     'main': { 
      templateUrl: 'partials/list.html', 
      controller: 'ListController' 
     }, 
     'header': { 
      templateUrl: 'partials/header.html', 
      controller: 'HeaderController' 
     }, 
     'breadcrumb': { 
      templateUrl: 'partials/breadcrumb.html', 
      controller: function($scope) { 
       $scope.breadcrumb = ['Home', 'Library', 'Data']; 
      } 
     }, 
     'sidebar': { 
      templateUrl: 'partials/sidebar.html' 
     } 
    } 
}). 
state('details', { 
    url: '/details/:id', 
    resolve: { 
     headerFactory: function(headerFactory) { 
      return headerFactory; 
     } 
    }, 
    views: { 
     'header': { 
      templateUrl: 'partials/header.html', 
      controller: 'HeaderController' 
     }, 
     'main': { 
      templateUrl: 'partials/details.html', 
      controller: 'DetailsController' 
     }, 

     'breadcrumb' : { 
      templateUrl: 'partials/breadcrumb.html', 
      controller: function($scope) { 
       $scope.breadcrumb = ['Home', 'Library', 'Details']; 
      } 
     }, 
     'sidebar': { 
      templateUrl: 'partials/sidebar.html' 
     }   
    } 
}); 

}]); 

正如你可以看到有兩條路：/列表/細節，應用程序完美的作品，但我只是在尋找使意見的最好方式，因爲你可以看到，每當我導航到一條路線，我們通過重寫相同的視圖來重複相同的視圖，例如：標題是相同的，邊欄...等等。

Answer 1

您可以創建一個狀態層次結構，使細節狀態爲孩子的狀態你的應用程序

$stateProvider.state('main', { 
    url: '/main', 
    abstract: true, 
    resolve: { 
     headerFactory: function(headerFactory) { 
      return headerFactory; 
     } 
    }, 
    views: { 
     'header': { 
      templateUrl: 'partials/header.html', 
      controller: 'HeaderController' 
     }, 
     'breadcrumb': { 
      templateUrl: 'partials/breadcrumb.html', 
      controller: function($scope) { 
       $scope.breadcrumb = ['Home', 'Library', 'Data']; 
      } 
     }, 
     'sidebar': { 
      templateUrl: 'partials/sidebar.html' 
     } 
    } 
}). 
state('main.list', { 
    url: '/list', 
    views: { 
     'main@main.list': { 
      templateUrl: 'partials/list.html', 
      controller: 'ListController' 
     } 
    } 
}). 
state('main.details', { 
    url: '/details/:id', 
    views: { 
     'main@main.details': { 
      templateUrl: 'partials/details.html', 
      controller: 'ListController' 
     } 
    } 
}); 

Answer 2

謝謝，我改變了我的代碼：

$urlRouterProvider. 
otherwise('/list'); 

$stateProvider. 
state('home', { 
    abstract: true, 
    views: { 
     'header': { 
      templateUrl: 'partials/header.html', 
      controller: 'HeaderController' 
     }, 
     'breadcrumb': { 
      templateUrl: 'partials/breadcrumb.html', 
      controller: function($scope) { 
       $scope.breadcrumb = ['Home', 'Library', 'Data']; 
      } 
     }, 
     'sidebar': { 
      templateUrl: 'partials/sidebar.html' 
     } 
    } 

}). 
state('home.list', { 
    url: '/list', 
    views: { 
     'main@': { 
      templateUrl: 'partials/list.html', 
      controller: 'ListController' 
     } 
    } 
}). 
state('home.details', { 
    url: '/details/:id', 
    views: { 
     'main@': { 
      templateUrl: 'partials/details.html', 
      controller: 'DetailsController' 
     }   
    } 
}); 

在我的索引我有這樣的：

<div class="container"> 
     <div class="row"> 
      <!-- SideBar --> 
      <div ui-view="sidebar" class="col-xs-3 sidebar"></div> 
      <!-- /.SideBar --> 


      <div class="col-xs-8"> 
       <!-- Breadcrumb --> 
       <div ui-view="breadcrumb" class="pull-right"></div> 
       <!-- /.Breadcrumb --> 

       <!-- Main Content --> 
       <div ui-view="main"></div> 
       <!-- /.Main Content --> 
      </div> 
     </div> 
    </div> 

的問題是，我第一次進入應用程序試圖點擊時，（否則正常工作），但一個超鏈接與詳細信息/ ID我得到這個錯誤：錯誤：無法解析狀態'home.list''細節'，我現在有點困惑！