How to add multiple controller in single page in AngularJS

Question

I am new to AngularJS I have a problem with this code. I want to add multiple controller in single ng-app. But it execute first one. Why not second one?

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angul /1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-controller="cont1">
        <input type="text" ng-model="fullname">
        {{fullname}}
    </div>
    <div ng-controller="cont2">
        <input type="text" ng-model="fname">
        {{fname}}
    </div>
    <script>
        var app = angular.module("myapp", []);
        app.controller('cont1', function ($scope) {
            $scope.fullname = "";
        });
        var new = angular.module('myapp', []);
        new.controller('cont2', function ($scope) {
            $scope.fname = "";
        });
    </script>
</body>
</html>

T J · Accepted Answer · 2016-01-29 07:01:09Z

15

Because you are overwriting the first myapp module when you do var new= angular.module('myapp',[]);.

Your code should be:

var app = angular.module("myapp", []);
app.controller('cont1', function($scope) {
  $scope.fullname = "";
});
app.controller('cont2', function($scope) {
  $scope.fname = "";
});

or

var app = angular.module("myapp", []);
app.controller('cont1', function($scope) {
  $scope.fullname = "";
});
angular.module("myapp").controller('cont2', function($scope) {
  $scope.fname = "";
});

The second parameter[] passed to module() makes the difference

answered Jan 29, 2016 at 7:01

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

1 Comment

AlainIb Over a year ago

you totaly right about the parameter []. but this syntax is better ( don't use var app) :

angular.module("myapp", []); angular.module("myapp").controller('cont1', function($scope) {...}); angular.module("myapp").controller('cont2', function($scope) {...});

Pratap A.K · Accepted Answer · 2016-01-29 14:44:15Z

To best way to define controllers, directives, factories etc... is

define your modules names in a separate file

app.module.js

angular.module("myapp",[]); // inside [] you define your module dependencies

for controllers create separate file (depending on your requirement even you can create 1 file for 1 controller)

some.controller.js

angular.module("myapp").controller('someCtrl'['$scope', function($scope){

}]);

angular.module("myapp").controller('someOtherCtrl'['$scope', function($scope){

}]);

NOTE:

Two types you can write controller

TYPE1 (not recomended)

.controller('ctrlName', function($scope){

});

TYPE2 (recomended)

.controller('ctrlName', ['$scope', function($scope){

}]);

Reason

So as you can see in the TYPE2 we are passing controller dependencies in an array, so when we compile our program angular will give the name as eg:a to $scope inside function() and treat it as $scope.

With the TYPE1 you need to follow specific order while defining controller dependency otherwise angular will through error because in this approach angular simply treats first dependency as $rootscope, second as $scope and so on....

For Eg:

you can't pass dependencies to your controller like this

.controller('ctrlName', function($http, $scope) {

});

this will throw error

if you define like

.controller('ctrlName', function($scope, $http) {

    });

this will work fine since its in order that angular wants.

Worthwelle · Accepted Answer · 2018-11-03 04:54:21Z

0

You can define multiple controllers in a single module in this way also:

    angular.module("myapp",[]);
    .controller('cont1',function($scope){
      $scope.fullname="";
       });

   .controller('cont2',function($scope){
    $scope.fname="";
    });

When you are defining modules, don't use var. You can find some of the Angular best practices here: Angular Style Guide/Best Practices

edited Nov 3, 2018 at 4:54

Worthwelle

1,2691 gold badge17 silver badges21 bronze badges

answered Jan 29, 2016 at 14:02

srikanth reddy gongati

641 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to add multiple controller in single page in AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related