using two controllers for one view using routeprovider angularjs

Question

is possible to use two different controller for one view using roteProvider

something like this:

angular.module('myApp', 'ui.router', 'ui.bootstrap', 'indexedDB', 'ngOrderObjectBy']).config(function ($stateProvider, $urlRouterProvider, $indexedDBProvider) {

$urlRouterProvider.otherwise("/student");

$stateProvider
    .state('studentId', {
        url: "/student/:studentId/:classId",
        templateUrl: "views/Student/Student.html",
          controller:'StudentCtrl'
    })
    .state('modules', {
        url: "/modules",
        templateUrl: "views/modules/modules.html",
          controller:'studentCtrl',
          controller:'modulesCtrl'          
 });

well, not like that, modulesCtrl is the one that will be used, since its the last to be declared, you can use as many controllers as you want, but as far as i know, only one to be declared in the routing, to use more controllers "down the line", use ng-controller directive directly. http://stackoverflow.com/questions/25061540/can-i-pass-multiple-controllers-in-routeprovider-when-in-angularjs — thsorens, Jan 20 '16 at 20:12

score 0 · Accepted Answer · answered Jan 20 '16 at 20:48

You can't define two controllers in such way, the second parameter you pass to .state is a javascript object and it's keys are unique. Try to open the browser console and do this:

> var obj = {"view":"a", "controller":"CA", "controller":"CB"}
> obj
< Object {view: "a", controller: "CB"}

You see that only the last key/value is saved.

Back to the question, I think you can apply the second controller inside the template. In the config you will have:

$stateProvider
    .state('studentId', {
       ...
    })
    .state('modules', {
        url: "/modules",
        templateUrl: "views/modules/modules.html",
        controller:'modulesCtrl'          
 });

And in the template:

<div class="modules">
    ...
    <div class="students" ng-controller="studentCtrl">
        ...
    </div>
    ...
</div>

DavidNJ · Answer 2 · 2016-01-23T00:21:22.820

You can make both states children of a common parent abstract state. The only negative would be that the abstract state must have a URL, which would appear. The URL could be something simple (e.g. '/a') or something descriptive of both modules.

Why are the views sharing a controller? Are the functions implemented in the controller? Common current Angular coding standards are for thin controllers that map functions and object stored in factories/services to the view. Presumably each of your states would have a unique controller that mapped the functions from one or more factories to the view. The controller then would only contain mappings to variables or functions actually used in the view.

However, if you most your can add a controller to a controller if you define the function separately:

angular.module('MyApp', [])

.controller('Ctrl1', Ctrl1)
  .controller('Ctrl2', Ctrl2)
  .controller('Ctrl3', Ctrl3);

function Ctrl1() {
  var vm = this;
  vm.name = "Ctrl1name";
  vm.fn = function() {
    console.log("I am controller Ctl1")
  };
}

function Ctrl2() {
  var vm = this;
  vm.name = "Ctrl2name";
  vm.fn = function() {
    console.log("I am controller Ctl2")
  };
}

function Ctrl3() {
  var vm = this;
  vm.ct1 = new Ctrl1();
  vm.ct2 = new Ctrl2();

}

It is in this Codepen: http://codepen.io/StretchKids/pen/gPoERN/?editors=0010

As you can see, Ctrl3's function has variables set to a new version of Ctrl1's and Ctrl2's functions. The internal variables are accessed through that variable

using two controllers for one view using routeprovider angularjs

2 Answers2