Question

我想创建一个获取json数据的服务。

控制器：

angular.module('app')
    .controller('serviceCtrl',['$scope', 'Services', function($scope,Services) {
      $scope.title="services";
      $scope.services = Services.get();
}]);

工厂服务：

angular.module('app')
        .factory('Services', function(){
            return $http.get('/api/services.json').then(function(response){
                return response.data;
            })
        });

service.html：

<div ng-repeat="service in Services">
    <div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6">
        <figure class="figure">
            <img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{Services.name}}">
            <figcaption class="figure-caption">
            <a href="">
                <h3>{{Services.name}}</h3>
            </a>
            </figcaption>
        </figure>
    </div>
</div>

但我收到错误ReferenceError: $http is not defined

我创建工厂的方式是对的吗？

Answer 1

$ http是角度的一部分，您需要先将其注入工厂，然后才能使用它。此外，您不希望返回一个promise，而是一个具有您需要的功能的对象。

angular
    .module('app')
    .factory('Services', myService);

    myService.$inject = ['$http'];

    function myService($http){
        function getJson() {
            return $http.get('/api/services.json').then(function(response){
                return response.data;
            })
        }

        return {
          getJson: getJson
        };
    }

之后，您可以在控制器中使用此服务。

angular
    .module('app')
    .controller('serviceCtrl', serviceCtrl);

    serviceCtrl.$inject = ['$scope', 'Services'];

    function serviceCtrl($scope,Services){
        var vm = this;
        this.json = {}

        activate();

        function activate(){
            Services.getJson().then(function(response){
                vm.json = response;
            });
        }
    }

请注意，在实际加载状态之前最好解决promises。

使用服务来获取json数据

1 个答案: