Routage dans angularjs pour plusieurs contrôleurs?

Je suis en train de construire un point de vue - j'ai mis en place deux contrôleurs de la pratique, la HeaderCtrl, avec quelques données (titre du site, en-tête arrière-plan, etc), les autres devraient avoir le contenu principal de la page - MainCtrl.

Lors de la définition de la route, je fais comme ceci:

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

Cela fonctionne parfaitement bien, mais ce que je veux, c'est de spécifier plusieurs paramètres à cela, quelque chose comme ceci:

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

Cela ne fonctionne pas donc je suppose que ce n'est pas la façon de le faire. Ce que je suis en train de vous poser la question: pouvez-vous préciser plusieurs contrôleurs de $routeProvider ? Ou quelle serait la bonne façon de construire ce point de vue ?

source d'informationauteur greedz

angularjs angularjs-routing

16

Mon approche à ce problème serait d'avoir deux directives de l'en - tête et la main, qui référence les templates correspondants.

Par Exemple:
```
app.directive('header', function () {
  return {
    restrict: 'A',
    replace: true,
    templateUrl:'templates/header.html'
  }
})
```
Alors vous pouvez avoir une page qui contient les directives - index.html.
```
<div header></div>
<div main></div>
```
Alors un contrôleur de routes au index.html

Vous pouvez également encapsuler l'en-tête et de la main d'en-tête distincte et contrôleurs principaux si vous voulez les traiter séparément.

par exemple
```
<div ng-controller="HeaderCtrl">
    <div header></div>
</div>
<div ng-controller="MainCtrl">
    <div main></div>
</div>
```
ou avec les modèles en eux-mêmes
2

Ce que vous voulez faire est de placer votre HeaderCtrl à l'extérieur de ng-view puis ont MainCtrl connecté à votre indice de route (ie. '/'). Si vous avez besoin de plusieurs contrôleurs connecté à votre indice de route, vous pouvez les assigner à l'intérieur du modèle que vous avez mappé sur ce parcours. Voici ce qui pourrait ressembler à:

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>
```
...ou, si vous avez vraiment envie de faire preuve de créativité, vous pourriez inclure ui-router de la AngularUI gens https://github.com/angular-ui/ui-router Cela vous permettra d'avoir plusieurs "points de vue" et de cartographier vos itinéraires.
0

Je ne pense pas que vous pouvez spécifier plusieurs contrôleurs. Je pense que ce que vous recherchez est quelque chose comme une 'index.html modèle qui fait référence à votre en-tête et le tableau de bord:
```
<div id='header' ng:controller='HeaderCtrl' />
<div id='main' ng:controller='MainCtrl' />
```
Remplir avec le droit des modèles, je voudrais utiliser une directive. Je pense que c'est l'une des plus puissantes du moment cinétique. Vous pouvez en créer un en-tête de la directive que vous pouvez réutiliser sur toutes vos pages.

-1

Essayez cela, il doit travailler

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

Vous devez vous connecter pour publier un commentaire.