Controllers across multiple files in Angular JS

Question

I am trying to modularize the implementation of an angular js project. I am aiming to implement different controllers in their own js files. But that doesnt seem to work.

The following is my config.js ( where the primary module is also defined )

(function() {
var app= angular.module("spa", [

    //oob angular modules


    //3rd party modules
    'ui.router',
    'ui.bootstrap'
]);

app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);

//function to config the routes

function configRoutes($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('dashboard', {
        url: '/',
        templateUrl: '../App/Views/dashboard.html',
        controller: 'dashboardController',
        controllerAs: 'vm'
    })

    .state('supplier', {
        url: '/suppliers',
        templateUrl: '../App/Views/supplier.html',
        controller: 'supplierController',
        controllerAs: 'vm'
    })

    .state('event', {
        url: '/events',
        templateUrl: '../App/Views/event.html',
        controller: 'eventController',
        controllerAs: 'vm'
    })

    .state('partner', {
        url: '/partners',
        templateUrl: '../App/Views/partner.html',
        controller: 'partnerController',
        controllerAs: 'vm'
    })





    $urlRouterProvider.otherwise('/');

}

app.controller('dashboardController', dashboardController)

function dashboardController() {
    alert('dashboard-same function');
}
}());`

the dashboardController triggers fine. But other controllers, written in seperate files dont trigger.

(function () {

'use strict';

var app = angular.module('spa');
app.controller('eventController', eventController);

function eventController() {
    alert('event');
}
});

This is the sequence of my references:

<!--External Libs-->
<script src="../Scripts/jquery-1.9.1.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-animate.js"></script>
<script src="../Scripts/angular-sanitize.js"></script>
<script src="../Scripts/angular-cookies.js"></script>
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>   

<!--Jquery Plugins-->

<!--Custom Libs-->
<script src="../App/Common/config.js"></script> 

<!--Controllers-->
<script src="../App/Controllers/event.js"></script>
<script src="../App/Controllers/partner.js"></script>
<script src="../App/Controllers/dashboard.js"></script>
<script src="../App/Controllers/supplier.js"></script>

Thanks in advance

yes it does. But eventController, in event.js doesnt trigger at all. It throws the generic Argument 'eventController' is not a function, got undefined error — Swayam Siddha
– Swayam Siddha, Commented Apr 20, 2015 at 12:50
In your eventController,the function wrapping your controller isn't being executed. Change the last line from }); to })();. If this is a typo in your question, please create a jsfiddle where we can try and fix it. Also I don't see routes.js in your html. — caffeinated.tech
– caffeinated.tech, Commented Apr 20, 2015 at 13:19
controllerAs: 'vm' - these all being the same ('vm') smells funny to me. (I not sure it's the issue though, I don't declare controllers in my routes at all, they go in directives). — lecstor
– lecstor, Commented Apr 20, 2015 at 13:19
@lclk bang on the spot. Thanks for the pointer. Its a mistake I do so many time s :/ — Swayam Siddha
– Swayam Siddha, Commented Apr 20, 2015 at 13:44

caffeinated.tech · Accepted Answer · 2015-04-20 14:06:18Z

2

As per my comment, you forgot to execute the wrapping function of eventController.js. It should be

(function () {
  'use strict';

  var app = angular.module('spa');
  app.controller('eventController', eventController);

  function eventController() {
      alert('event');
  }
})();
//^^--------You forgot these

If it doesn't work after said fix, please create a fiddle from your local code instead of the fiddle code to prevent any typo errors and I will take a look.

Also I don't see routes.js in your html, or maybe you meant config.html.

answered Apr 20, 2015 at 14:06

caffeinated.tech

6,5561 gold badge24 silver badges41 bronze badges

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

Comments

Mark Veenstra · Accepted Answer · 2015-04-20 13:14:57Z

1

Not completely sure what is going wrong on your side, but here is an example of how I do it:

For example I am using the following setup for modularizing my AngularJS app (v1.3.6):

index.html:

<html>
<head>
    <title>Modularize</title>

    <!-- load module -->
    <script src="app/app.js"></script>
    <script src="app/app.constant.js"></script>
    <script src="app/app.config.js"></script>
    <script src="app/app.run.js"></script>

    <!-- load controllers/services/directives/factories -->
    <script src="app/controllers/MyController.js"></script>
</head>
<body>
    <!-- REST OF THE APP -->
</body>
</html>

app.js

var myapp = angular.module('spa', ['ui.router']);

app.constant.js

myapp.constant(function () {

});

app.config.js

myapp.config(function ($stateProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'app/views/home.html',
            controller: 'MyController',
        });
});

app.run.js

myApp.run(function () {

});

MyController.js

myapp.controller('MyController', function ($scope) {

});

edited Apr 20, 2015 at 13:14

answered Apr 20, 2015 at 12:37

Mark Veenstra

4,7496 gold badges38 silver badges68 bronze badges

5 Comments

Swayam Siddha Over a year ago

var app= angular.module(''spa', []); is in one file only. I am using 1.3.15 version of angular js. Global variables are not allowed. How am I supposed to associate a controller without re-referencing the existing module. As per my knowledge var app = angular.module('spa'); . only acts as a getter and refernces to the existing module

Mark Veenstra Over a year ago

I am using 1.3.6 and I added an example

lecstor Over a year ago

only one file should do var app = angular.module('spa', []);. As many files as you like can do var app = angular.module('spa');

lecstor Over a year ago

yup, sorry, was just backing you up there.. 8)

Swayam Siddha Over a year ago

@MarkVeenstra as per my understanding, you need to wrap all code in an 'iffy' so that there is no global variable. With multiple files, you would need multiple iffies. You can't acess variables of one iffy in another.

Collectives™ on Stack Overflow

Controllers across multiple files in Angular JS

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related