Error in AngularJS script output

Question

I'm new to AngJS and I'm trying to write code on my own. I got stuck in one part.

Code:

<!DOCTYPE HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title> First page </title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    First Name: <input type="text" ng-model="person.firstName"> <br>
    Last Name: <input type="text" ng-model="person.lastName"> <br>
    <p> {{person.firstName + " " + person.lastName}} age is: {{age[0]}}</p>
</div>

<div ng-app="mApp" ng-controller="mCtrl">
    Registration number: <input type="number" ng-model="person.regNum"> <br>
    Class number: <input type="text" ng-model="person.classNum"> <br>
    <p> {{person.regNum, person.classNum}} </p>
</div>

<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
    $scope.person = {firstName:"Nikhil",lastName:"Hegde"};
    $scope.age = [20,21,22];
    });

var app1 = angular.module('mApp',[]);
app1.controller('mCtrl',function($scope) {
    $scope.person = {regNum:"122503",classNum:"12EC48"};
    });

</script>
</body>
</html>

I'm not really sure what is wrong with the second pair of fields but the output as you can see is incorrect.

Also can I reuse the app variable? app = angular.module('myApp',[]);

Instead of using a separate 'app1' variable, can I also reuse the same variable 'app' as: app = angular.module('mApp',[]);

One more query along with the above; Is it possible to use one application and having two controllers for the same? — Nikhil Hegde
– Nikhil Hegde, Commented Sep 29, 2016 at 7:54
Yes you can have one ng-app with multiple controllers (see my answer) or you can have one ng-app with one controller (@Sajeetharan's answer) — Weedoze
– Weedoze, Commented Sep 29, 2016 at 7:57

Weedoze · Accepted Answer · 2016-09-29 07:54:34Z

2

You should have only one app

<!DOCTYPE HTML>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <title> First page </title>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        First Name: <input type="text" ng-model="person.firstName"> <br>
        Last Name: <input type="text" ng-model="person.lastName"> <br>
        <p> {{person.firstName + " " + person.lastName}} age is: {{age[0]}}</p>
    </div>

    <div ng-controller="mCtrl">
        Registration number: <input type="number" ng-model="person.regNum"> <br>
        Class number: <input type="text" ng-model="person.classNum"> <br>
        <p> {{person.regNum, person.classNum}} </p>
    </div>

<script>
    var app = angular.module('myApp',[])
    .controller('myCtrl',function($scope) {
        $scope.person = {firstName:"Nikhil",lastName:"Hegde"};
        $scope.age = [20,21,22];
    })
    .controller('mCtrl',function($scope) {
        $scope.person = {regNum:"122503",classNum:"12EC48"};
    });

</script>
</body>
</html>

answered Sep 29, 2016 at 7:54

Weedoze

14k2 gold badges38 silver badges65 bronze badges

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

2 Comments

Nikhil Hegde Over a year ago

I understood what you were trying to convey but I tried copy pasting your code to see if it works and it doesn't seem to. {{person.firstName + " " + person.lastName}} age is: {{age[0]}} {{person.regNum, person.classNum}} are the outputs of the two pairs of fields.

Nikhil Hegde Over a year ago

I must have made some kind of mistake when I ported your code. I used the concept of one module for an app and multiple controllers. It works! Thanks for your help! @Weedoze

priya_singh · Accepted Answer · 2016-09-29 08:05:33Z

2

 <body>
   <div ng-app="myApp">
     <div ng-controller="myCtrl">
       First Name: <input type="text" ng-model="person.firstName"> <br>
       Last Name: <input type="text" ng-model="person.lastName"> <br>
      <p> {{person.firstName + " " + person.lastName}} age is: {{age[0]}}</p>
    </div>

    <div ng-controller="mCtrl">
      Registration number: <input type="number" ng-model="person.regNum"> <br>
      Class number: <input type="text" ng-model="person.classNum"> <br>
     <p> {{person.regNum+ " "+ person.classNum}} </p>
  </div>
</div>

Script file

 <script>
   var app = angular.module('myApp',[]);
   app.controller('myCtrl',function($scope) {
     $scope.person = {'firstName':"Nikhil",'lastName':"Hegde"};
     $scope.age = [20,21,22];
   });

app.controller('mCtrl',function($scope) {
  $scope.person1 = {'regNum':"122503",'classNum':"12EC48"};
 });

define your app only once. You can add multiple controller to ng-module. Hope It will be useful.

answered Sep 29, 2016 at 8:05

priya_singh

2,4881 gold badge19 silver badges33 bronze badges

1 Comment

Nikhil Hegde Over a year ago

I made some kind of a mistake when porting your code as well. Your concept works too! Thanks!

Sajeetharan · Accepted Answer · 2016-09-29 08:56:06Z

1

You can have only 1 module in an app, have different scope variable inside same controller

 var app = angular.module('myApp', []);
 app.controller("myCtrl", ["$scope", "$http",
   function($scope, $http) {
     $scope.person = {
       firstName: "Nikhil",
       lastName: "Hegde"
     };
     $scope.registration = {
       regNum: "122503",
       classNum: "12EC48"
     };
     $scope.age = [20, 21, 22];
   }
 ]);

DEMO

edited Sep 29, 2016 at 8:56

answered Sep 29, 2016 at 7:51

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

Nikhil Hegde Over a year ago

I removed the $http and the dependencies on the controller. I just made it app.controller("myCtrl", function(scope) { .... } It works but that's not the concept I'm trying to learn here. Thanks but!

Nikhil Hegde Over a year ago

It certainly helped but @Weedoze answer was the one I was looking for

Sajeetharan Over a year ago

@NikhilHegde its not about the answer, just a upvote

Collectives™ on Stack Overflow

Error in AngularJS script output

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related