How to define controllers in multiple files – AngularJs

All we need is an easy explanation of the problem, so here it is.

I am trying to define controllers in separate files, but I’m getting the error:

transactionsController not a function got undefined

File structure

I have added files in this sequence
1- common.js
2- transactions.js

Common.js
In common files I have defined

var app = angular.module("spModule", ["ngMessages", "ui.bootstrap"]);

Transactions.js

angular.module('spModule').controller('transactionsController',
    ['$scope', '$http', function ($scope, $http) {} ]
);

HTML FIle

<body ng-app="spModule" ng-controller="transactionsController">

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

First, you should get rid of the global app variable. This is not necessary. Second, you have to understand the principle of the angular.module() method.

Using angular.module() with two parameters (e.g. angular.module('my-module', [])) would result in setting a new module with its corresponding dependencies. In contrast, when using angular.module('my-module') the corresponding module is looked up internally and returned to the caller (getting).

The means when you first define you application you might just create the following files and structure.

app.js

angular.module('myApp', []);

FirstController.js

angular.module('myApp').controller('FirstController', function () {});

SecondController.js

angular.module('myApp').controller('SecondController', function () {});

If you now include these files in your html document in this particularly order (at least app.js has to come first), your application works just fine with two separate controllers in two separate files.

Further readings

I can recommend the AngularJS Styleguide on modules for getting more ideas on this topic.

Method 2

You Can put this controller in seprate file like mycontroller1.js

    

    app.controller('myController', ['$scope',function($scope)    
        {
        $scope.myValue='hello World'
        }])


Same like this you can create new js file ‘myNewcontroller.js’ and can put new controller :


    app.controller('myController2', ['$scope',function($scope)    
        {
        $scope.myValue='hello World'
        }])


Hope this will help you 🙂 Cheers !!

Method 3

You can do this stuff by creating modules. Create module and respective controllers. And inject that module to the main app module.

Transactions.js

(function() {
   'use strict';
   angular.module('tmodule', []);
})();

(function() {
   'use strict';
    angular.module('tmodule').controller('transactionsController', ['$scope', '$http', 
            function ($scope, $http){
    }]);

})();

Now inject the “tmodule” to your Common.js file-

  var app = angular.module("spModule", ["ngMessages", "ui.bootstrap","tmodule"]);

Method 4

Load your common.js first. Move ng-app directive to <html> tag. Change transaction.js to:

app.controller('transactionsController', TransactionsController)

TransactionsController.$inject = ['$scope','$http']

function TransactionsController($scope, $http) {


};

Just for fun. Let me know what happens.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply