在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''细节'，我现在有点困惑！