Маршрутизация в angularjs для нескольких контроллеров?

Я пытаюсь создать представление - я настроил два контроллера на практике, один HeaderCtrl, с некоторыми данными в нем (название сайта, фон заголовка и т.д.), другой должен иметь основное содержимое страницы - MainCtrl.

При определении маршрута я делаю так:

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
})

Это работает отлично, но я хотел бы указать несколько параметров для этого, например:

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'HeaderCtrl',
       templateUrl: 'modules/header.html'
   },
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
})

Это не работает, поэтому я предполагаю, что это не способ сделать это. Что я на самом деле спрашиваю - можете ли вы указать несколько контроллеров в $routeProvider? Или что будет правильным способом построения этого представления?

Ответ 1

Мой подход к этой проблеме состоял бы в том, чтобы иметь две директивы - header и main, которые ссылаются на соответствующие шаблоны.

Пример:

app.directive('header', function () {
  return {
    restrict: 'A',
    replace: true,
    templateUrl:'templates/header.html'
  }
})

Затем вы можете иметь страницу, содержащую директивы - index.html.

<div header></div>
<div main></div>

Затем у вас есть один контроллер, который направляет на ваш index.html

Вы также можете инкапсулировать заголовок и главный элемент в отдельный заголовок и основные контроллеры, если вы хотите иметь дело с ними отдельно.

например.

<div ng-controller="HeaderCtrl">
    <div header></div>
</div>
<div ng-controller="MainCtrl">
    <div main></div>
</div>

или самими шаблонами

Ответ 2

Что вы можете сделать, это разместить HeaderCtrl вне ng-view, а затем MainCtrl отобразить на ваш индексный маршрут (например, '/'). Если вам нужно иметь мультиплексные контроллеры, сопоставленные с вашим маршрутом индекса, вы можете назначить их в шаблоне, который вы сопоставили с этим маршрутом. Вот как это выглядит:

index.html

<html>
<body ng-app='yourApp'>
    <div id="header" ng-controller="HeaderCtrl"></div>
    <div ng-view></div>
</body>
</html>

app.js

angular.module('mainApp', []).
config(function ($routeProvider) {
    $routeProvider.when('/', {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
});

dashboard.html

<div ng-controller="SomeCtrl"></div>
<div ng-controller="SomeOtherCtrl"></div>

... или, если вы действительно хотите стать творческим, вы можете включить ui-router из людей AngularUI https://github.com/angular-ui/ui-router Это позволяют вам иметь несколько "представлений" и сопоставлять их с вашими маршрутами.

Ответ 3

Вы должны использовать angular ui-router: https://github.com/angular-ui/ui-router, вы можете указать контроллер и шаблон для каждого "элемента" вашего страница:

myApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "viewA": { template: "index.viewA" },
        "viewB": { template: "index.viewB" }
      }
    })
    .state('route1', {
      url: "/route1",
      views: {
        "viewA": { template: "route1.viewA" },
        "viewB": { template: "route1.viewB" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "viewA": { template: "route2.viewA" },
        "viewB": { template: "route2.viewB" }
      }
    })
});

Ответ 4

Я не думаю, что вы можете указать несколько контроллеров. Я думаю, что то, что вы ищете, похоже на шаблон index.html, который ссылается на ваш заголовок и панель:

<div id='header' ng:controller='HeaderCtrl' />
<div id='main' ng:controller='MainCtrl' />

Чтобы на самом деле заполнить правильные шаблоны, я бы использовал директиву. Я думаю, что это одна из самых мощных частей angular. Вы можете создать директиву заголовка, которую вы можете использовать повторно на всех ваших страницах.

Ответ 5

Попробуйте это, он должен работать

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'HeaderCtrl',
       templateUrl: 'modules/header.html'
   }).when('',  //route here in the empty quotes
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   });
});