Enrutamiento en angularjs para múltiples controladores?

Estoy tratando de crear una vista: he configurado dos controladores para practicar, uno de HeaderCtrl, con algunos datos (título del sitio, fondo del encabezado, etc.), el otro debe tener el contenido principal de la página: MainCtrl.

Al definir la ruta, estoy haciendo lo siguiente:

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

Esto funciona perfectamente bien, pero lo que me gustaría es especificar múltiples parámetros para esto, algo como esto:

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

Esto no funciona, así que supongo que no es la forma de hacerlo. Lo que realmente estoy preguntando: ¿puedes especificar varios controladores en $ routeProvider? ¿O cuál sería la forma correcta de construir esta vista?

    Mi enfoque para este problema sería tener dos directivas: header y main que hagan referencia a las plantillas correspondientes.

    Por ejemplo:

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

    Entonces puede tener una página que contenga las directivas – index.html .

     

    Luego, tenga un controlador que se dirija a su index.html

    También puede encapsular el encabezado y el principal en encabezados y controladores principales separados si desea tratarlos por separado.

    p.ej

     

    o con las plantillas mismas

    Lo que podría querer hacer es colocar su HeaderCtrl fuera de ng-view y luego asignar MainCtrl a su ruta de índice (es decir, ‘/’). Si necesita tener asignadas varias controladoras a su ruta de índice, puede asignarlas dentro de la plantilla que ha asignado a esa ruta. Esto es lo que se vería así:

    index.html

        

    app.js

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

    dashboard.html

     

    … o, si realmente deseaba ser creativo, podría incluir ui-router de AngularUI https://github.com/angular-ui/ui-router Esto le permitiría tener múltiples “vistas” y mapa ellos a tus rutas.

    Debe usar el ui-router de angular: https://github.com/angular-ui/ui-router , puede especificar un controlador y una plantilla para cada “elemento” de su página:

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

    No creo que puedas especificar múltiples controladores. Creo que lo que estás buscando es algo así como una plantilla ‘index.html’ que se refiere a tu encabezado y tablero:

      

    Para completar las plantillas correctas, utilizaría una directiva. Creo que esta es una de las partes más poderosas de angular. Puede crear una directiva de encabezado que puede reutilizar en todas sus páginas.

    Prueba esto, debería funcionar

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