Routing in angularjs for multiple controllers?

Question

I'm trying to build a view - I've set up two controllers to practice, one's HeaderCtrl, with some data in it (site title, header background, etc), the other should have the main content of the page - MainCtrl.

When defining the route, I'm doing like so:

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

This works perfectly fine, but what I would want is to specify multiple parameters to this, something like this:

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

This doesn't work so I'm guessing it's not the way to do it. What I'm actually asking - can you specify multiple controllers in $routeProvider ? Or what would be the correct way to build this view ?

Answer 1

My approach to this problem would be to have two directives - header and main which reference the corresponding templates.

For Example:

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

Then you can have a page that contains the directives - index.html.

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

Then have one controller that routes to your index.html

You can also encapsulate the header and main in separate header and main controllers if you want to deal with them separately.

e.g.

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

or with the templates themselves