CODEWITHSUNDEEP
javascripthtmlangularjs
RohanArihant
RohanArihant

Reputation: 2730

How to add multiple controller in single page in AngularJS

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>

Upvotes: 6

Views: 20340

Answers (3)

srikanth reddy gongati
srikanth reddy gongati

Reputation: 64

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

Upvotes: 0

Pratap A.K
Pratap A.K

Reputation: 4517

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.

Upvotes: 1

T J
T J

Reputation: 43156

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

Upvotes: 15

Related Questions