Angularjs loading another conttroler from a new file

Question

I'm trying to seperate my controllers with different files. I looked here and did the following, but I still not able to load the second controller from a new js file. I tried this - Angularjs Impossible to load multiply ng-apps in one page even with angular.boostrap

HTML:

    <!DOCTYPE html>
    <html lang="en" ng-app="xpCalc">
    <head>
    <meta charset="UTF-8">
    <title>RuneScape Toolkit</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script type="text/javascript" src="xpCalc.js"></script>
<script type="text/javascript" src="cmbtCalc.js"></script>
    </head>
    <body>
   <div  ng-controller="xpCalculatorController">
   <p>Insert your current Level  <input type="number" ng-       model="currentLevel"></p>
   <p>Insert your desired Level <input type="number" ng-model="desiredLevel"        ></p>
   <h2>{{xpleft() | number}}</h2>
   </div>

   <br>
   <div  ng-controller="CombatCalculatorController">
<p>Insert your Attack Level  <input type="number" ng-model="ALvl"></p>
<p>Insert your Strength Level  <input type="number" ng-model="SLvl"></p>
<p>Insert your Magic Level  <input type="number" ng-model="MLvl"></p>
<p>Insert your Range Level  <input type="number" ng-model="RLvl"></p>
<p>Insert your HitPoints Level  <input type="number" ng-model="HLvl"></p>
<p>Insert your Defense Level  <input type="number" ng-model="DLvl"></p>
<p>Insert your Prayer Level  <input type="number" ng-model="PLvl"></p>

<h2> {{combatlevel() | number}}  </h2>
</div>
</body>
</html>

JS FILE ONE:

var app = angular.module('xpCalc', []);

   app.factory('xpService',function(){
  var service = {};


 function calculate(level) {  
    var output = 0;
    for (var i = 1; i < level; i++) {
    output += (Math.floor(i + 300 * Math.pow(2, i / 7)) / 4);
  }
   return output;
   }

 service.getxpLeft = function(currentLevel,desiredLevel){
 var currentXp = calculate(currentLevel);
 var desiredXp = calculate(desiredLevel);

  return desiredXp - currentXp;
     };

      return service;
  });


app.controller('xpCalculatorController', function($scope,xpService) {
    $scope.currentLevel = 1;
     $scope.desiredLevel = 1;

    $scope.xpleft = function() {
      return xpService.getxpLeft($scope.currentLevel,$scope.desiredLevel);
       };
 });

SECOND JS FILE:

  angular.module('xpCalc').controller('CombatCalculatorController', ["$scope", "$http", function($scope, $http){
 $scope.ALvl = 1 ;
 $scope.SLvl = 1 ;
 $scope.MLvl = 1 ;
 $scope.RLvl = 1 ;
 $scope.HLvl = 10 ;
 $scope.DLvl = 1 ;
 $scope.PLvl = 1 ;


  }]);

what is ng-app="cmbtCalc", the code you've shown does not include an cmbtCalc, which seems neccessary for this app to work — vileRaisin, Aug 30 '16 at 10:48
@vileRaisin sorry, only one ng per app, I forgot to remove it. But it still won't work — oto260, Aug 30 '16 at 10:49

score 0 · Answer 1 · answered Aug 30 '16 at 10:50

If both files are loaded at the same time, the app variable becomes a global variable, so it is accessible from any js file loaded at the momment. (Be careful with asyncronous)

PD. angular.module('xpCalc') may create another module different to app and it may cause you problems

PD. 2: My solution is not tested

score 0 · Answer 2 · answered Aug 30 '16 at 12:13

i have created a plunkr for your reference.link. please check your issue gor resolve. please change your second controller like this

app.controller('CombatCalculatorController', ["$scope", "$http", function($scope, $http) {
  $scope.ALvl = 1;
  $scope.SLvl = 1;
  $scope.MLvl = 1;
  $scope.RLvl = 1;
  $scope.HLvl = 10;
  $scope.DLvl = 1;
  $scope.PLvl = 1;

}]);

score 0 · Answer 3 · answered Aug 30 '16 at 12:30

It works fine.. Console statement prints perfectly.

var app = angular.module('xpCalc', []);

   app.factory('xpService',function(){
  var service = {};


 function calculate(level) {  
    var output = 0;
    for (var i = 1; i < level; i++) {
    output += (Math.floor(i + 300 * Math.pow(2, i / 7)) / 4);
  }
   return output;
   }

 service.getxpLeft = function(currentLevel,desiredLevel){
 var currentXp = calculate(currentLevel);
 var desiredXp = calculate(desiredLevel);

  return desiredXp - currentXp;
     };

      return service;
  });


app.controller('xpCalculatorController', function($scope,xpService) {
    $scope.currentLevel = 1;
     $scope.desiredLevel = 1;

    $scope.xpleft = function() {
      return xpService.getxpLeft($scope.currentLevel,$scope.desiredLevel);
       };
 });
 angular.module('xpCalc').controller('CombatCalculatorController', ["$scope", "$http", function($scope, $http){
  console.log('start')
 
 $scope.ALvl = 1 ;
 $scope.SLvl = 1 ;
 $scope.MLvl = 1 ;
 $scope.RLvl = 1 ;
 $scope.HLvl = 10 ;
 $scope.DLvl = 1 ;
 $scope.PLvl = 1 ;
  console.log('end')



  }]);

 <!DOCTYPE html>
    <html lang="en" ng-app="xpCalc">
    <head>
    <meta charset="UTF-8">
    <title>RuneScape Toolkit</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script type="text/javascript" src="xpCalc.js"></script>
<script type="text/javascript" src="cmbtCalc.js"></script>
    </head>
    <body>
   <div  ng-controller="xpCalculatorController">
   <p>Insert your current Level  <input type="number" ng-model="currentLevel"></p>
   <p>Insert your desired Level <input type="number" ng-model="desiredLevel"        ></p>
   <h2>{{xpleft() | number}}</h2>
   </div>

   <br>
   <div  ng-controller="CombatCalculatorController">
<p>Insert your Attack Level  <input type="number" ng-model="ALvl"></p>
<p>Insert your Strength Level  <input type="number" ng-model="SLvl"></p>
<p>Insert your Magic Level  <input type="number" ng-model="MLvl"></p>
<p>Insert your Range Level  <input type="number" ng-model="RLvl"></p>
<p>Insert your HitPoints Level  <input type="number" ng-model="HLvl"></p>
<p>Insert your Defense Level  <input type="number" ng-model="DLvl"></p>
<p>Insert your Prayer Level  <input type="number" ng-model="PLvl"></p>

<h2> {{combatlevel() | number}}  </h2>
</div>
</body>
</html>

score 0 · Answer 4 · answered Aug 30 '16 at 12:40

0

The problem was I didn't save as cmbtCalc.js it was only cmbtCalc,

answered Aug 30 '16 at 12:40

oto260

41
3

Angularjs loading another conttroler from a new file

4 Answers4