Best IT Recipes

Routing in angularjs for multiple controllers?

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

When defining a route, I do this:

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

This works fine, but I would like to specify a few parameters for this, for example:

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

This does not work, so I assume that this is not a way to do this. What I'm actually asking is, can you specify multiple controllers in $ routeProvider? Or what would be the right way to build this view?

+10
angularjs angularjs-routing
Jun 27 '13 at 22:54
source share
5 answers

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

Example:

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

Then you can have a page containing directives - index.html .

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

Then you have one controller that directs to your index.html

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

eg.

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

or by the templates themselves

+16
Jun 28 '13 at 1:03
source share

What you can do is place the HeaderCtrl outside of the ng-view and then display the MainCtrl on your index route (e.g. '/'). If you need to have multiplex controllers mapped to your index route, you can assign them in the template that you map to this route. Here's what it looks 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 want to be creative, you can enable the ui-router from AngularUI people https://github.com/angular-ui/ui-router This allows you to have several "views" and map them to your routes .

+2
Jun 27 '13 at 23:48
source share

You should use angular ui-router: https://github.com/angular-ui/ui-router , you can specify a controller and a 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" } } }) });
+2
Aug 28 '15 at 18:33
source share

I do not think you can specify multiple controllers. I think what you are looking for is similar to the index.html template that references your title and panel:

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

To actually fill in the correct 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 of your pages.

0
Jun 27 '13 at 23:15
source share

Try it, 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' }); });
-one
Sep 20 '13 at
source share


More articles:


All Articles