CODEWITHSUNDEEP
angularjs
Bbeni
Bbeni

Reputation: 75

AngularJs can't run a method

I am a beginner angularjs user, but i have to learn it for my new job and I thought I could practice a bit. So I did a simple string reverse method and I thought I could make a simple calculator (exactly, only sum). Here is my code. I made 2 modules, 2 controllers and the first one is working fine, but the calculator isn't. However I made a simple site, where only the calc code is, and it works fine and I don't understand why it works, but doesn't work if 2 modules are on the same site.(Yeah, i'm a very beginner). Thank you for your help. 

<!DOCTYPE html>
<html lang="en">
<head>
<script   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="MyApp" ng-controller="myController">
<center>  
<input type="text" ng-model="myString" placeholder="Enter text"/>
<p>Input: {{myString }}</p>
<p>Filtered input: {{getReverse()}}</p>
</center>
</div>
<br><br>
<center>
<div ng-app="MyCalc" ng-controller="myCalculate">
 <input type="text" ng-model="firstNumber"><br>
 <input type="text" ng-model="secondNumber"><br>
 <p> Result: {{getResult()}}</p>
 </div>
 </center>


<script>

var reverse = angular.module("MyApp", []);
var calc = angular.module("MyCalc",[]);  



  reverse.controller('myController',function($scope){
      $scope.myString = "";
      $scope.getReverse = function(){
          return $scope.myString.split("").reverse().join(""); 
      }
  });



  calc.controller('myCalculate',function($scope){
      $scope.firstNumber = 0;
      $scope.secondNumber = 0;
      $scope.getResult = function(){
          return Number($scope.firstNumber)+Number($scope.secondNumber);
      }
  });
</script>

Upvotes: 0

Views: 59

Answers (4)

Drkdra
Drkdra

Reputation: 409

Normally, you should not use 2 angular app in a web page. If you need to use different module, just make one depend on another.

Let's say your main module is MyApp and you need MyCalc's function, you do it like this (JsFiddle):

var calc = angular.module("MyCalc",[]);  
calc.controller('myCalculate',function($scope){
    $scope.firstNumber = 0;
    $scope.secondNumber = 0;
    $scope.getResult = function(){
        return Number($scope.firstNumber)+Number($scope.secondNumber);
    }
});
// Make MyApp module depend on MyCalc
var reverse = angular.module("MyApp", ["MyCalc"]);
reverse.controller('myController',function($scope){
    $scope.myString = "";
    $scope.getReverse = function(){
        return $scope.myString.split("").reverse().join(""); 
    }
});

And then in the HTML:

<body ng-app="MyApp">
    <div ng-controller="myController">
        <center>  
            <input type="text" ng-model="myString" placeholder="Enter text"/>
            <p>Input: {{myString }}</p>
            <p>Filtered input: {{getReverse()}}</p>
        </center>
    </div>
    <br><br>
    <center>
        <div ng-controller="myCalculate">
             <input type="text" ng-model="firstNumber"><br>
             <input type="text" ng-model="secondNumber"><br>
             <p> Result: {{getResult()}}</p>
        </div>
    </center>
</body>

P/s: If you really need to bootstrap 2 angular app in the same web page, you need to bootstrap it manually (JsFiddle):

angular.bootstrap(document.getElementById('calc'), ['MyCalc']);

calc is the id of the element you need to bootstrap the second app on

<div id="calc" ng-controller="myCalculate">

Upvotes: 0

balajivaishnav
balajivaishnav

Reputation: 2893

Use angular ng-modules to achieve this

here is the working [link] [1]

[1] http://jsfiddle.net/j5jzsppv/111/

<div ng-modules="MyModuleA, MyModuleB">
<div ng-controller="myController">
 <input type="text" ng-model="myString" placeholder="Enter text"/>
    {{myString}}
    <p>Filtered input: {{getReverse()}}</p>
</div>
<div ng-controller="myCalculate">
<input type="text" ng-model="firstNumber"><br>
<input type="text" ng-model="secondNumber"><br>
<p> Result: {{getResult()}}</p>
</div>


var reverse = angular.module("MyModuleA", []);
var calc = angular.module("MyModuleB", []);
reverse.controller('myController', function ($scope) {
$scope.myString = "";
$scope.getReverse = function () {
    return $scope.myString.split("")
        .reverse()
        .join("");
}
});
calc.controller('myCalculate', function ($scope) {
$scope.firstNumber = 0;
$scope.secondNumber = 0;
$scope.getResult = function () {
    return Number($scope.firstNumber) + Number($scope.secondNumber);
}
});

Upvotes: 0

Silvinus
Silvinus

Reputation: 1445

ng-app directive can be used just one time in page.

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. (https://docs.angularjs.org/api/ng/directive/ngApp)

But you can bootstrap manually your app. Affect id on div that contains an angular app and add this to your script (https://plnkr.co/edit/ZTW7mXx3iXm803xdYod1?p=preview): 

  angular.bootstrap(document.getElementById('reverse'), ['MyApp']);
  angular.bootstrap(document.getElementById('calc'), ['MyCalc']);

But I agree with Vikash, create more modules and less app :)

Upvotes: 1

Vikash Kumar
Vikash Kumar

Reputation: 1718

use ng-module instead of ng-app because ng-app can be used with one module in one page.

<div ng-module="MyModuleA">
<h1>Module A</h1>
<div ng-controller="MyControllerA">
    {{name}}
</div>


<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
    {{name}}
</div>


var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});

var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});

Upvotes: 0

Related Questions