AngularJS: passing in variables into a service

Question

I created a service that has a method that does a simple calculation. It takes a value and squares it. However, I'm getting an error saying that square is undefined so I'm guessing I'm passing in the value incorrectly.

jsfid: http://jsfiddle.net/ADukg/19107/

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

/* function MyCtrl($scope) {
    $scope.name = 'Superhero';
} */

myApp.controller('MyCtrl', ['$scope', function($scope, CalcService) {
var cheese = CalcService.square(2);
  $scope.value = cheese;
  
}]);

myApp.service('CalcService', function(x){
   this.square = function(x) {

   var y = x*x;
      return y;
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
  Hello, {{value}}!
</div>

In your controller you aren't injecting the CalcService, and you're adding the parameter x to the service function. You should remove it. Check this updated jsFiddle: jsfiddle.net/ADukg/19114 — The.Bear
– The.Bear, Commented Feb 28, 2018 at 4:51
Ah ok, syntax error, so the injection happens in the beginning with the quotes, why the need to put it in the function param then? — Snorlax
– Snorlax, Commented Feb 28, 2018 at 4:59
This is for file minification. Check this post: stackoverflow.com/questions/18698963/…. You can write it like myApp.controller('MyCtrl', function($scope, CalcService) {} but this won't work when you minify your file. — The.Bear
– The.Bear, Commented Feb 28, 2018 at 5:02

Arun · Accepted Answer · 2018-02-28 05:09:10Z

i think you missed to inject service to controller in proper way check the snippet

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div ng-app="myApp">

  <div ng-controller="MyCtrl">
  Hello, {{value}}!
</div>
  </div>
</body>

</html>

<script>
var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

/* function MyCtrl($scope) {
    $scope.name = 'Superhero';
} */

myApp.service('CalcService', function(){
   this.square = function(x) {

   var y = x*x;
      return y;
   }
});
myApp.controller('MyCtrl', ['$scope','CalcService', function($scope, CalcService) {
var cheese = CalcService.square(2);
  $scope.value = cheese;
  
}]);


</script>

</body>

</html>

Hanif · Accepted Answer · 2018-02-28 12:34:58Z

1

See here you missed CalcService inject in controller initialization:

myApp.controller('MyCtrl', ['$scope', 'CalcService', function($scope, CalcService) {
var cheese = CalcService.square(2);
$scope.value = cheese;

}]);

answered Feb 28, 2018 at 12:34

Hanif

3,8451 gold badge14 silver badges20 bronze badges

Comments

Snehal S · Accepted Answer · 2018-02-28 13:28:27Z

1

You missed to inject 'CalcService'.

myApp.controller('MyCtrl', ['$scope','CalcService', function($scope, CalcService) { }]);

answered Feb 28, 2018 at 13:28

Snehal S

344 bronze badges

Comments

Sergey Bogdanov · Accepted Answer · 2018-02-28 12:21:28Z

0

Your service should be something like:

myApp.service('CalcService', function(){
return {
    square: function (x) {
        var y = x*x;
        return y;
    }
}});

And you should inject service in your controller.

edited Feb 28, 2018 at 12:21

answered Feb 28, 2018 at 4:57

Sergey Bogdanov

12 bronze badges

Collectives™ on Stack Overflow

AngularJS: passing in variables into a service

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related