Bbeni Bbeni - 3 months ago 8
AngularJS Question

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>





Answer

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">