CODEWITHSUNDEEP
angularjs
xrcwrn
xrcwrn

Reputation: 5327

not able to call factory at controller

I have created a factory named paging that will return numbers for pagination.

expenseApp.factory('paging', function() {
  this.pages = function(min, max, step) {
    if (max <= 5) {
      min = 1;
    }
    if (max > 5) {
      min = max - 3;
    }
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step)
      input.push(i);
    return input;
  };

I want to call this factory in my controller 

 expenseApp.controller('expenseController', function($scope, $http, paging) {
    $scope.range = function() {
      $scope.answer = paging.range(0, 10, 1);
    }
  });

but this code is not working. I tried it here 

var expenseApp = angular.module('expenseApp', []);
expenseApp.factory('paging', function() {
  this.pages = function(min, max, step) {
    if (max <= 5) {
      min = 1;
    }
    if (max > 5) {
      min = max - 3;
    }
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step)
      input.push(i);
    return input;
  };
  expenseApp.controller('expenseController', function($scope, $http, paging) {
    $scope.pages = function() {
      $scope.answer = paging.range(0, 10,1);
    }
  });
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="MyApp.js"></script>
  <script src="MyCtrl.js"></script>

</head>

<body>
  <div ng-app="expenseApp" ng-controller="expenseController">
    <h1>Hello Plunker!</h1>
    <ul class="pagination">
      <li ng-repeat="a in pages">
        <a ng-click="pagination(a)">{{a}}</a>
      </li>
    </ul>
  </div>
</body>

</html>

Upvotes: 0

Views: 134

Answers (2)

user8317956
user8317956

Reputation: 

var expenseApp = angular.module('expenseApp', []);
expenseApp.factory('paging', function() {
  return {
    pages: function(min, max, step) {
      if (max <= 5) {
        min = 1;
      }
      if (max > 5) {
        min = max - 3;
      }
      step = step || 1;
      var input = [];
      for (var i = min; i <= max; i += step)
        input.push(i);
      return input;
    }
  }
});

expenseApp.controller('expenseController', ['$scope', '$http', 'paging', function($scope, $http, paging) {
  $scope.pages = function() {
    $scope.answer = paging.pages(0, 10, 1);
  }
  $scope.pages();
}]);
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>

<body>
  <div ng-app="expenseApp" ng-controller="expenseController">
    <h1>Hello Plunker!</h1>
    <ul class="pagination">
      <li ng-repeat="a in answer">
        <a ng-click="pagination(a)">{{a}}</a>
      </li>
    </ul>
  </div>
</body>

</html>

Kindly check this snippet.

Changes I made:

index.html

<script src="MYApp.js"></script>

<ul class="pagination">
      <li ng-repeat="a in answer">
        <a ng-click="pagination(a)">{{a}}</a>
      </li>
</ul>

MyCtrl.js

expenseApp.factory('paging', function() {
  return {
    pages: function(min, max, step) {
      if (max <= 5) {
      min = 1;
    }
    if (max > 5) {
      min = max - 3;
    }
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step)
      input.push(i);
    return input;
    }
  }
});

expenseApp.controller('expenseController', ['$scope','$http', 'paging', function($scope, $http, paging) {
  $scope.pages = function() {
    console.log(paging)
    $scope.answer = paging.pages(0, 10,1);
  }
  $scope.pages();
}]);

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

This is because you are getting error

Error: [$injector:undef] http://errors.angularjs.org/1.6.5/$injector/undef?p0=paging(…)

Which means that your factory is not returning any values. So, to resolve this you can use this code in your factory

expenseApp.factory('paging', function() {
  var paging = {};
  var range = function(min, max, step) {
    if (max <= 5) {
      min = 1;
    }
    if (max > 5) {
      min = max - 3;
    }
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step)
      input.push(i);
    return input;
  };
  paging.range = range;
  return paging;
});

Notice that var paging = {}; is a JSON object that will hold all the functionality provided by this factory like range so paging.range = range; will add a factory method range to the range key of the paging object. Then finally this object is returned from the service.

Now whenever you use the factory paging, then it is similar to using the JSON object paging. Thus, access paging.range(0, 10,1) will now invoke the factory method.

Your plunkr also does not work so here is the link to the working PLUNKR

Upvotes: 0

Related Questions