Каков самый чистый способ сделать просмотр в пользовательском интерфейсе AngularJS?

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 i получает эту ошибку: Ошибка: не удалось разрешить «детали» из состояния «home.list», я немного запутался прямо сейчас!