CODEWITHSUNDEEP
angularjs
Shakeer Hussain
Shakeer Hussain

Reputation: 2526

How to call $http.get() in Service using AngularJS

I want to inject Service in a controller. The Service will return $http.get() method.

Error : [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=JsonFilterProvider%20%3C-%20JsonFilter

Please suggest whats wrong in my code?

 <script>
        var app = angular.module("myApp", []);
        app.controller("myCntlr", ['$scope', 'myhttpService', function ($scope,  myhttpService) {

                $scope.myHttpMessage = myhttpService.httpGetService();
            }]);

 app.service("myhttpService", ['$http', '$scope', function ($http, $scope) {

            this.httpGetService = function () {
                console.log("httGetService");
               $http.get('https://reqres.in/api/users').then(function (successResponse) {
                    console.log("http Get");
                    return successResponse;

                }, function (errorResponse) {
                    console.log("http Get Error");
                    return errorResponse
                });
            };


    }]);

</script>


 <div ng-app="myApp" ng-controller="myCntlr">

        <p>Http Message:{{myHttpMessage|Json}}</p>

</div>

Upvotes: 1

Views: 2328

Answers (3)

AST TSA
AST TSA

Reputation: 1

 <!DOCTYPE html>
  <html>
 <head>
 <script  src="https:/ 
/ajax.googleapis. 
 com/ajax/libs/ang 
 ularjs/1.8.2/angular. 
 min.js"></script>
 </head>
 <body>
 <a href="/restapi/getfile? 
 code=jdndndnd&attachment=true" 
 id="downloadLink">download</a>

  <script> document.  getElementById(. 
 'downloadLink'). 
 .addEventListener('click', 
 function(event) {
        event.preventDefault(); // 
  Отменить стандартное действие.    
  перехода по ссылке

        // Создать XMLHttpRequest для 
  отправки запроса
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 
 this.getAttribute('href'), true);

        // Установить заголовки
        
  xhr.setRequestHeader('Authorization', 
 'Bearer your-access-token');
        xhr.setRequestHeader('Custom- 
  Header', 'custom-value');

        xhr.responseType = 
 'arraybuffer';

        xhr.onload = function() {
            if (xhr.status === 200) {
                var blob = new 
  Blob([xhr.response], { type: 
 'application/pdf' });
                var url = 
 window.URL.createObjectURL(blob);

          // Создать ссылку для 
 скачивания файла
                var a = 
 document.createElement('a');
                a.href = url;
                a.download = 
 'downloaded-file.pdf';
                
 document.body.appendChild(a);
                a.click();

                // Очистить ссылку 
 после скачивания
                
 window.URL.revokeObjectURL(url);
            } else {
                console.error('Ошибка 
  при загрузке файла:', 
  xhr.statusText);
            }
        };

        xhr.send();
    });
  </script>
 </body>
  </html>
  **strong text**

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222522

The actual issue is you are not getting the response from your service. So the json filter throws an error

 <p>Http Message:{{myHttpMessage | json}}</p>

Make sure yo return the result back from the service with a return command.

return  $http.get('https://reqres.in/api/users').then(function (successResponse)

Upvotes: 1

lucid
lucid

Reputation: 2890

You can not inject $scope in service. that's not allowed. Instead, you can return promise from service and process inside controller something like this.

app.service("myhttpService",['$http', function ($http) {
    this.httpGetService = function () {
       return $http.get('https://reqres.in/api/users');
    }
}]);

app.controller("myCntlr", ['$scope', 'myhttpService', function ($scope,  myhttpService) {
  myhttpService.httpGetService().then(function(response){
     $scope.myHttpMessage = response.data;
  }, function(error){
     //do something on failure
  });
}]);

Upvotes: 3

Related Questions