CODEWITHSUNDEEP
javascriptangularjs
nitroman
nitroman

Reputation: 673

Error with angular program

I am new to angularjs and while trying it I got problem. Here is my code snippet.I defined angular apps named nameApp ,ageApp and there controllers. First app nameApp is working properly and my problem is with second app ageApp. Its not working properly.

<html>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',[]);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      })

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      })      
    </script>
  </head>
  <body>
    <div ng-app="nameApp" ng-controller="NameCtrl">
      First name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div ng-app="ageApp" ng-controller="ageCtrl">
      Your Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
</html>

Values of firstName and lastName are binding properly,but the attribute age is not properly.

Upvotes: 0

Views: 93

Answers (3)

mokarakaya
mokarakaya

Reputation: 723

As I mentioned this is duplicate with; AngularJS Multiple ng-app within a page

You need to bootstrap after div is created and it's not obvious in duplicate item.

<html>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',[]);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      });

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      });      

    </script>
  </head>
  <body>
    <div ng-app="nameApp" ng-controller="NameCtrl">
      Firsta name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div id="App2" ng-app="ageApp" ng-controller="ageCtrl">
      Youra Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
  <script>
    angular.bootstrap(document.getElementById("App2"), ['ageApp']);
  </script>
</html>

Upvotes: 0

Maria Ines Parnisari
Maria Ines Parnisari

Reputation: 17506

The problem can be found by looking at the docs for ngApp directive:

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.

Upvotes: 2

Varit J Patel
Varit J Patel

Reputation: 3520

What exactly I have done here is,

I have make two modules name : nameApp and ageApp. and nameApp will be the main module that is having dependency of ageApp and will load ageApp module as well.

Since Angular is single page application. we can make one main module and inject dependency of other modules.

<html ng-app="nameApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',['ageApp']);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      })

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      })      
    </script>
  </head>
  <body>
    <div ng-controller="NameCtrl">
      First name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div ng-controller="ageCtrl">
      Your Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
</html>

Hope it helps you.

Let me know if you've more questions.

Cheers!

Upvotes: 1

Related Questions