How to define controllers in multiple files - AngularJs

Question

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">

This should work fine. Are you sure you're loading the files in the correct order? The error looks strange? Is that really the error you got? — Andreas Argelius
– Andreas Argelius, Commented Jan 30, 2015 at 7:44
did you include the Transactions.js file in the HTML document? — Claies
– Claies, Commented Jan 30, 2015 at 7:45
i've noticed the errors from angular coming back slightly strange. This seems to definitely be a script include/ordering problem, post the entire HTML. There is also no point in specifying an app variable if you don't use it in that file either. — Callum Linington
– Callum Linington, Commented Jan 30, 2015 at 7:47
@AndreasArgelius not getting any error regarding file includes , — Ali Raza
– Ali Raza, Commented Jan 30, 2015 at 9:54

fdomig · Accepted Answer · 2015-01-30 10:32:05Z

58

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.

1 Comment

Luis Lopez Over a year ago

yes, it works!!!. Be sure the first time you write .module(one argument, second argument), Others controllers, .module(just one argument) . The first time, it creates an instance, and the other ones, it gets the instance!!

Viral Pala · Accepted Answer · 2015-01-30 10:09:26Z

3

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 !!

answered Jan 30, 2015 at 10:09

Viral Pala

691 bronze badge

Comments

dprobhat · Accepted Answer · 2016-06-21 10:24:29Z

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"]);

edited Jun 21, 2016 at 10:24

answered Jun 20, 2016 at 17:19

dprobhat

1522 silver badges11 bronze badges

Comments

Patrick Motard · Accepted Answer · 2015-01-30 08:19:29Z

1

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.

answered Jan 30, 2015 at 8:19

Patrick Motard

2,6602 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to define controllers in multiple files - AngularJs

4 Answers 4

Further readings

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Further readings

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related