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

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

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

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? Или что будет правильным способом построения этого представления?

источник

2013-06-27 greedz

Мой подход к этой проблеме состоял бы в том, чтобы иметь две директивы - 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>

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

источник

2013-06-28 01:03:45 jeh

Мне пришлось использовать 'transclude: true', чтобы этот метод работал – ZimSystem

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

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

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

источник

2013-06-27 23:15:19

Что нужно сделать, это разместить 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 Это позволит вам иметь несколько «просмотров» и сопоставить их с вашими маршрутами.

источник

2013-06-27 23:48:29

-1

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

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' 
    }); 
});

источник

2013-09-20 10:56:21 rohit

Вы должны использовать угловой-х UI-маршрутизатор: 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" } 
 
     } 
 
    }) 
 
});

источник

2015-08-28 18:33:15

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

ответ

Смежные вопросы