Routing in angularjs for multiple controllers?

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

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.

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

Routing in angularjs for multiple controllers?

Related

Recent Posts