Angular, multiple controllers and routing with $routeProvider

Question

I am trying to set up an angularjs application properly with separate controllers.

Using $routeProvider, I want to configure the routing in order to see different views depending on the URL.

So far it's working, but only with the view depending on the last controller loaded.

Here is the code :

Routes configuration, app.js :

'use strict';

var app = angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap', 'BalrogApp.controllers']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/projectsList.html',
        controller : 'projectsController',
        controllerAs: 'p'
      })
      .when('/requests', {
        templateUrl: 'views/requestsList.html',
        controller : 'requestsController',
        controllerAs: 'r'
      })
      .when('/projects', {
        templateUrl: 'views/projectsList.html',
        controller : 'projectsController',
        controllerAs: 'p'
      })
      .otherwise({
        redirectTo: '/lol'
      });

  }]);

Controller 1, requestsController.js :

'use strict';

var requestsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Request data";
  this.studentMark = 75;

});

Controller 2, projectsController.js :

'use strict';

var projectsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Project data";
  this.studentMark = 75;

});

Main html page, index.html :

    <!doctype html>
    <html lang="en" ng-app="BalrogApp">
    <head>
      <meta charset="UTF-8">
      <title>Student Details App</title>
      <link rel="stylesheet" href="../node_modules/angular-ui-bootstrap/ui-bootstrap-csp.css"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    </head>

    <body>
    Index page :

    <ng-view></ng-view>

    <!--Required JS Files List :start -->
    <script src="../node_modules/angular/angular.js"></script>
    <script src="../node_modules/angular/angular-route.js"></script>
    <script src="../node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>

    <script src="controllers/requestsController.js"></script>
    <script src="controllers/projectsController.js"></script>

    <script src="js/app.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!--Required JS Files List :end -->

    </body>
    </html>

HTML Requests view : Request view :

<div class="row-fluid">
  <div class="span2">{{r.studentName}} </div>
  <div style="display:inline-block; min-height:290px;">
    <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
  </div>
</div>

HTML Projects view :

Project view :
<div class="row-fluid">
  <div class="span2">{{p.studentName}} </div>
  <div style="display:inline-block; min-height:290px;">
    <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
  </div>
</div>

So the problem there changed depending on index.html :

<script src="controllers/requestsController.js"></script>
<script src="controllers/projectsController.js"></script>

Will result in a working projects view, but not working requests view. If I include the requests controller after, this will be the opposite.

Also, is there a problem with my ControllerAs syntax ? Since I'm using it from the $routeProvider, it's not working at all.

With the view that is not working, the console shows this : "Error: [ng:areq] Argument 'requestsController' is not a function, got undefined... — Ellone
– Ellone, Commented Oct 27, 2015 at 16:16
you have defined two urls for the projectsController, what happens if you go to / or /projects ? — insomiac
– insomiac, Commented Oct 27, 2015 at 16:20
In projects Controller, for modules do this : var projectsControllerModule = angular.module('BalrogApp.controllers', []); As you have already defined the modules and dependencies before the projectsContoller is overwriting it.. — insomiac
– insomiac, Commented Oct 27, 2015 at 16:24

katspaugh · Accepted Answer · 2015-10-27 16:21:35Z

2

When you do angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);, it creates a new module. What you really want is to reference an existing module, otherwise you will overwrite it every time you load a controller JavaScript file.

Change you controllers initialization to this:

angular.module('BalrogApp').controller('requestsController', function () {
    // ...
});

And

angular.module('BalrogApp').controller('projectsController', function () {
    // ...
});

This way, you'll be referencing an existing module and will not overwrite it every time.

answered Oct 27, 2015 at 16:21

katspaugh

18k12 gold badges69 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ellone Over a year ago

How does it work exactly ? The syntax angular.module('BalrogApp.controllers', ... will create a module controllers in the module BalrogApp and will inherit its dependance ? I tried to remove the dependances from the controllers like you suggested but this didn't work for me. I also don't know if I should remove all these BalrogApp.controllers in order to keep only BalrogApp Could you please provide a plunker ?

katspaugh Over a year ago

Just type it exactly as I typed. Not BalrogApp.controllers but just BalrogApp .

katspaugh Over a year ago

The name of the module is completely arbitrary, it doesn't inherit anything whatever you call it. It always creates a brand new module. docs.angularjs.org/guide/module

katspaugh Over a year ago

The config part (that uses the controllers) should go after you define the controllers. Like in a separate file. In the fist file keep only the module definition: angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap']).

Ellone Over a year ago

Thank you ! this fixed it. app.js was included after my controllers, so the controllers migh have been defined, but the module they are using was defined after them, I guess this was the issue. Thanks again

|

insomiac · Accepted Answer · 2015-10-27 16:26:21Z

1

In your app.js you have already defined the dependencies of modules and by defining again in the controllers you are overriding it, Fix the module line in your controllers as shown below :

Requests View :

'use strict';

var requestsControllerModule = angular.module('BalrogApp.controllers', []); // Fix This..

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Request data";
  this.studentMark = 75;

});

Projects view :

var projectsControllerModule = angular.module('BalrogApp.controllers', []); // Fix this..

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Project data";
  this.studentMark = 75;

});

answered Oct 27, 2015 at 16:26

insomiac

5,6848 gold badges47 silver badges73 bronze badges

1 Comment

Ellone Over a year ago

I did that but this wasn't enough. It still does the same thing, I can access the data from projectsController because it is the last declared but I can't access requestsController...

Collectives™ on Stack Overflow

Angular, multiple controllers and routing with $routeProvider

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related