How to use one module for multiple controllers

Question

How to use one module for multiple controllers, when these controllers are in different js files.

I have 3 js file 1. app.js 2. Login. js 3. Register.js

app.js

  var app = angular.module("myApp", ['ngRoute']);
 app.config(function ($routeProvider) {
   $routeProvider.when('/', {
    templateUrl: 'Login/login.html',
    controller: 'myCtrl'
})

.when('/register', {
    templateUrl: 'Register/register.html',
    controller: 'registerCntrl'
})

})

Login.js

var app = angular.module("myApp");
  app.controller("myCtrl", function ($scope) {

$scope.login = function (data) {
    console.log(data);
    if (data.name == 'pinku' && data.pswd == '1234') {
        console.log("Login Successfull");
    } else {
        console.log("Not successful");
    }
};
$scope.moreInfo = function () {
    alert("M in more info");
}

});

Register.js

   var app = angular.module("myApp");
   app.controller("registerCntrl", function ($scope) {

});

I have defined mymodule in my app.js file now i want to register my controller to that module and controllers are in different class. I have injected ng-Route in app.js. In login m using already defined module but m getting error

'Failed to instantiate module ngRoute due to:'

Thanks in advance

Rahul Arora · Accepted Answer · 2017-06-17 10:50:17Z

1

You can rather do:

angular.module("myApp")
.controller(...)

for both the controllers, rather than writing the variable here

Note: app.js should be loaded before any of the controllers for this to work.

This is one of the ways it can be done:

<html ng-app="myApp">
<head>
    <title></title>
</head>
<body>

    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="controller1.js"></script>
    <script type="text/javascript" src="controller2.js"></script>
</body>
</html>

Apart from this you can also use some task runners like gulp OR grunt to do that automatically.

edited Jun 17, 2017 at 10:50

answered Jun 17, 2017 at 10:18

Rahul Arora

4,5431 gold badge19 silver badges25 bronze badges

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

4 Comments

Java User Over a year ago

How to make sure that app.js is loading first?

Rahul Arora Over a year ago

If you are manually inserting it in your html, you should just include it in the script tag first followed by script tag for other controllers. It is as good as loading different script files in your html. Whichever you will mention first will be loaded first, check my answer

Java User Over a year ago

Hey I have one app.js and threr other js files login.js,register.js,user.js. I have defined module in app.js. In user.js i need to use ui-grid. For ui-grid i need to add it as module dependency var app = angular.module("myApp", ['ui.grid']);. Now other js files login and register are showing error , as we are using already created module. like var app = angular.module("myApp"); what should i do in this scenario?

Rahul Arora Over a year ago

You should just add the dependency in the main app.js and use the module definition in the other files as stated above. It will work fine. Make sure your user.js and other files are loaded after app.js. Also make sure that the JS for ui-grid is loaded before you load app.js

31piy · Accepted Answer · 2017-06-17 11:14:47Z

1

If you load your app.js first, in other files you can inject your modules like

app = angular.module("myApp");

Note that I omit [] from the function call. It means that you are trying to get already defined module.

edited Jun 17, 2017 at 11:14

31piy

23.9k6 gold badges51 silver badges69 bronze badges

answered Jun 17, 2017 at 10:17

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

1 Comment

Java User Over a year ago

How to make sure that app.js is loading first?

Collectives™ on Stack Overflow

How to use one module for multiple controllers

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related