Question

var app=angular.module('httpExample',[]);
app.controller("FetchController",["$scope","$http","$templateCache",function($scope,$http,$templateCache){
    var req={
             method : 'GET',
              url : 'http://www.w3schools.com/angular/customers.php',
              cache:'templateCache',
                  headers: {
                       'Content-Type': undefined
                     },
    };
    $scope.fetch = function() {

        $http(req).
            success(function(response,status,headers,config)
                    {

                        $scope.data=response;
                        console.log(angular.toJson(response));
                    }).
            error(function(data)
                {
                        console.log("Error : " + data);
                });
            };
}]);

我上面的代码，我试图从控制器点击url并在页面上显示它的响应..现在我试图从服务中点击url并在页面上显示响应..这是可能的。任何人都可以帮我解决这个问题

Answer 1

看来你的问题是如何在AngularJS中编写服务。阅读：https://docs.angularjs.org/guide/services

看起来应该是这样的：

app.factory('FetchService', ['$http', function($http) {
    return {
        fetch: fetch
    };

    function fetch() {
        // Do whatever you want.
        // Return whatever you want
    }
});

来自您的控制器

app.controller('FetchController', ['FetchService', function(FetchService) {
    $scope.fetch = function() {
        $scope.data = FetchService.fetch();
    };
});

Answer 2

因此，唯一的重大区别是您将$ http承诺（或结果）返回给控制器。这可能是您的代码的可能解决方案：

 .service('YourService', function($http){
var YourService = {
  fetch: function(){
    var promise = $http({method: "GET",
           url: "/theurl"
    })
    .then(function(response){
        return response;
    }, function(error){
      return error;
    });
    return promise;
  }
};
return YourService;

然后，在您的控制器中，您将注入＆＃39; YourService＆＃39;，只需致电YourService.fetch().then(function(resp){ });

这应该足以作为一个粗糙的脚手架。如果您不确定注入/ http承诺，请阅读服务和$ http承诺的角度文档。

Answer 3

这将是您重构的代码。请求的逻辑现在封装在服务中。

var app=angular.module('httpExample',[]);
app.controller("FetchController",["$scope","someService","$templateCache", 
  function($scope,someService,$templateCache){

    $scope.fetch = function() {
        someService.hitTheUrl()
            .success(function(response) {
                $scope.data=response;
                console.log(angular.toJson(response));
            })
            .error(function(data) {
                console.log("Error : " + data);
            });
    };
}])

.factory('someService', [$http, function ($http) {
    return {
        hitTheUrl: function () {
            var req = { 
                method : 'GET',
                url : 'http://www.w3schools.com/angular/customers.php',
                cache:'templateCache',
                headers: {
                    'Content-Type': undefined
                },
            };

            return $http(req);
        }
    };
}]);

Answer 4

现在我发布了我的答案。这可能对其他人有帮助。

var app=angular.module('httpExample',[]);
app.controller("FetchController",["$scope","clickevent",function($scope,clickevent){
    clickevent.fetch().error(function(error){

        console.log("Error");
    }).
      then(function(response){
           $scope.req=response;
           console.log(angular.toJson(response));
     });

}]);
app.service("clickevent",['$http',function($http){

        var clickevent={
                fetch:function(){
                    var prom=$http({method:"GET",url:"http://www.w3schools.com/angular/customers.php"}).
                    success(function(response){
                        return response;
                    }).
                    error(function(err){
                        return err;
                    });
                    return prom;
                }
        };
        return clickevent;
    }]);

当没有错误时，它会显示页面上的网址内容。

如何从angularjs中的服务中获取URL？

4 个答案: