CODEWITHSUNDEEP
javascripthtmlangularjs
Matoy
Matoy

Reputation: 1818

angular service's function cannot be used

I am trying to use a service in order to persiste some value to share in common for some ng-view's.

I have this script.js and about.html files below (plus some index.html which holds the ng-view place and some other files which I don't think relevent).

I expect, when I press on the button to activate the set() method which I defined in the service.

however, when I am pressing this button on chrome (on localhost:../... of course) I am getting this error message on the developer mode (F12): angular.js:12722 TypeError: myService.set is not a function

why? I have clearly defined it as a function (by defintion). is it an error in the object that service returns?

Thanks

script.js

var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.config(function($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'SharedController'
  }) 
  .when('/about', {
    templateUrl : 'pages/about.html',
    controller  : 'SharedController'
  })
  .when('/contact', {
    templateUrl : 'pages/contact.html',
    controller  : 'SharedController'
  });
});

scotchApp.factory('myService', function() {
 var savedData = {}
 var set=function (data) {
   savedData = data;
 } 
 function get() {
  return savedData;
}

return {
  set: set,
  get: get
}

});

scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService',
                function($scope, myService) { 


  $scope.updateMsg = function (msg) {
    myService.set(msg);
    $scope.message = myService.get();
  }
}]);

about.html

<div class="jumbotron text-center">
  <h1>old value</h1>
  <p>{{ message }}</p>
  <button type="button" ng-click="updateMsg('I am in about')">Click Me</button>
</div>

index.html

 <!DOCTYPE html>
 <html>
 <head>

  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
  </script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
  <script src="script.js"></script>
</head>
<body>

  <ul>
    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
  </ul>

  <div ng-app="scotchApp" ng-view>
  </div>

</body>
</html>

Upvotes: 0

Views: 73

Answers (1)

user3862271
user3862271

Reputation: 44

your controller does not have enough arguments in the function. so instead of 

scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService',
                function($scope, myService) {

it should be 

scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService',
                function($scope, $routeParams, myService)

{

A little more information as to why it was not working. Angular uses the array to figure out dependencies at runtime to make sure all required resources(providers) have been loaded; it uses the array spaces before the function to as a list of provides to load. As the DI resolves it assigns the providers to the arguments of the function in the same order they are listed in the array.

Upvotes: 2

Related Questions