Routing in angularjs for multiple controllers?

Asked 27/6, 2013 at 22:54 Answered 28/8, 2015 at 18:33

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 ?

Wapiti answered 27/6, 2013 at 22:54 Comment(0)

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

Moller answered 28/6, 2013 at 1:3 Comment(0)

What you might want to do is place your HeaderCtrl outside of ng-view and then have MainCtrl mapped to your index route (ie. '/'). If you needed to have multple controllers mapped to your index route, you can assign them within the template that you have mapped to that route. Here is what that would look like:

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>

...or, if you really wanted to get creative, you could include ui-router from the AngularUI folks https://github.com/angular-ui/ui-router This would allow you to have multiple "views" and map them to your routes.

Recitative answered 27/6, 2013 at 23:48 Comment(0)

You should use angular's ui-router : https://github.com/angular-ui/ui-router, you can specify a controller and template for each "element" of your page :

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

Countersignature answered 28/8, 2015 at 18:33 Comment(0)

I don't think you can specify multiple controllers. I think what you're looking for is something like an 'index.html' template that refers to your header and dashboard:

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

To actually fill in with the right templates, I would use a directive. I think this is one of the most powerful parts of angular. You can create a header directive that you can reuse on all your pages.

Ascension answered 27/6, 2013 at 23:15 Comment(0)

-1

Try this it should work

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

Submerge answered 20/9, 2013 at 10:56 Comment(0)

Recommended topics

Hot tags