How to create service in angular js?

Question

How to create service in angular js?

1.2k Views Asked by user3222157 At 28 April 2025 at 06:30

This is my code which is using service in angular.js.If i run this code I am getting this error Uncaught Error: [ng:areq].

</ons-toolbar>
        <div ng-controller="testAppController">
          Search: <input ng-model="query" type="text" class="text-input" id="my-input"/>
    <table>
      <tr>
        <th>Country</th>
        <th>Population</th>
      </tr>
      <tr ng-repeat="country in countries | filter:query">
        <td>{{country.name}}</td>
        <td>{{country.population}}</td>
      </tr>
    </table>
 </div>

 <div ng-include='"partials/footer.html"'></div>
    </ons-page>

demo.js

angular.module('testsapp',[])
  .service('helloworldservice',function($http){
     this.getDatafunction = function(){
        $http.get('json/countries.json')
          .success(function(data) {
             alert("sucesss");
          })
          .error(function(data) {
            alert("wrong");
          });     
     }
  })
  .controller('testAppController',['helloworldservice',function($scope,helloworldservice){
     helloworldservice.getDatafunction();
  }]);

Original Q&A

There are 2 best solutions below

**sylwester** · Answer 1

here

 .controller('testAppController',['helloworldservice',function($scope,helloworldservice)

you need to change to

.controller('testAppController',['$scope','helloworldservice',function($scope,helloworldservice)

please read more here

https://docs.angularjs.org/tutorial/step_05#a-note-on-minification

angular.module('testsapp', []).service('helloworldservice', function($http) {
  this.getDatafunction = function() {
    $http.get('json/countries.json').
    success(function(data) {
      alert("sucesss");
    }).
    error(function(data) {
      alert("wrong");
    });
  }

}).controller('testAppController', ['$scope','helloworldservice',
  function($scope, helloworldservice) {
    
    helloworldservice.getDatafunction();
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <body ng-app="testsapp">

        <div ng-controller="testAppController">
          Search: <input ng-model="query" type="text" class="text-input" id="my-input"/>
    <table>
      <tr>
        <th>Country</th>
        <th>Population</th>
      </tr>
      <tr ng-repeat="country in countries | filter:query">
        <td>{{country.name}}</td>
        <td>{{country.population}}</td>
      </tr>
    </table>
 </div>

 <div ng-include='"partials/footer.html"'></div>
    
  </body>

**Guillermo Gutiérrez** · Answer 2

You are missing the $scope service name in the controller definition:

.controller('testAppController',['$scope', 'helloworldservice',function($scope,helloworldservice){
   helloworldservice.getDatafunction();
}]);

Remember that if you specify the service names as strings for the parameters, you have to specify all the parameters for the function. Specifying the services names for injection is a recommended practice when you will minify the javascript.

Taking this into account, could be good to do the same for the $http parameter in your service definition:

.service('helloworldservice',['$http', function($http){
  this.getDatafunction = function(){
    $http.get('json/countries.json')
      .success(function(data) {
         alert("sucesss");
      })
      .error(function(data) {
        alert("wrong");
      });     
  }
}])

How to create service in angular js?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JSON

Related Questions in ANGULARJS

Related Questions in ONSEN-UI

Trending Questions

Popular # Hahtags

Popular Questions