Javascript AngularJS服务延迟API调用

我试图在不将所有信息存储在JS或我自己的API中的情况下，动态地从GitHub回购协议中获取一个国家列表，因此我编写了一个一次性服务来处理这个问题，并将结果缓存在浏览器中，以防再次需要它们。但是，我注意到，按照我编写的方式，

$http.get

在加载时被称为，而不是在控制器中注入服务时被称为，这意味着浏览器正在请求所有这些国家/地区数据，即使这些数据不需要（例如，即使用户访问国家/地区页面）

按照我的结构，因为服务只是返回一个承诺，所以我可以直接调用

countrylist。然后（…）

在控制器中。有没有办法保持这种状态，但仍然延迟对Github的请求，直到实际需要它

代码如下：

angular.module('myModule')
    .factory('countrylist', ['$http', 'growl', '$q', function ($http, growl, $q) {

        var deferred = $q.defer();
        var flagUrl = "https://raw.githubusercontent.com/hjnilsson/country-flags/master/png250px/{}.png";

        $http.get('https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/slim-2/slim-2.json',
                {cache: true})
                .success(function (data) {
                    angular.forEach(data, function (item) {
                        item.flag = flagUrl.replace("{}", item['alpha-2'].toLowerCase());
                    });

                    deferred.resolve(data);
                }).error(function (data) {
                    growl.warn("Error loading country data");
                    deferred.reject();
                });

        return deferred.promise;

    }]);

---

只要将工厂注入任何控制器一次，工厂中的所有内容都会立即运行，这是在应用程序启动时发生的

唯一的方法是使用获取数据的方法从工厂返回对象

angular.module('myModule')
.factory('countrylist', ['$http', 'growl', '$q', function ($http, growl, $q) {
  return {
    fetch: function() {
      var deferred = $q.defer();
      var flagUrl = "https://raw.githubusercontent.com/hjnilsson/country-flags/master/png250px/{}.png";

      $http.get('https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/slim-2/slim-2.json',
            {cache: true})
            .success(function (data) {
                angular.forEach(data, function (item) {
                    item.flag = flagUrl.replace("{}", item['alpha-2'].toLowerCase());
                });

                deferred.resolve(data);
            }).error(function (data) {
                growl.warn("Error loading country data");
                deferred.reject();
            });

      return deferred.promise;
    }
  };
}]);

然后在你的控制器中，你显然必须这样做

countryList.fetch().then(...)

---

简单一点，简单到

在您的服务中返回

承诺

（无需在服务中使用

然后

）

在控制器中使用

，然后使用

演示

这是我从中复制/粘贴的答案

var app = angular.module('plunker', []);

app.service('myService', function($http) {
  return {
    async: function() {
      return $http.get('test.json');  //1. this returns promise
    }
  };
});

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function(d) { //2. so you can use .then()
    $scope.data = d;
  });
});