Question

如何在加载视图和控制器之前从服务获取数据。我喜欢那个

resolve: {
            getAlbum: function(albumService){
                return albumService.getAlbums();

        },getAtum: function(albumService){
                return albumService.getAtum();

        }

    }

我有一项服务

.factory('albumService', ['$http', '$q'],
    function albumService($http, $q) {
        // interface
        var service = {
            albums: [],
            getAlbums: getAlbums,
            getAtum:getAtum
        };
        return service;

        // implementation
        function getAlbums() {
            var def = $q.defer();

            $http.get("data.json")
                .success(function(data) {
                    service.albums = data;
                    def.resolve(data);
                })
                .error(function() {
                    def.reject("Failed to get albums");
                });
            return def.promise;
        }

             function getAtum() {
            var def = $q.defer();

            $http.get("data.json")
                .success(function(data) {
                    service.albums = data;
                    def.resolve(data);
                })
                .error(function() {
                    def.reject("Failed to get albums");
                });
            return def.promise;
        }
    })

我需要在加载此控制器并查看之前从服务中获取数据。

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [{
    title: 'Reggae',
    id: 1
  }, {
    title: 'Chill',
    id: 2
  }, {
    title: 'Dubstep',
    id: 3
  }, {
    title: 'Indie',
    id: 4
  }, {
    title: 'Rap',
    id: 5
  }, {
    title: 'Cowbell',
    id: 6
  }];
})

我从两个服务获取数据。我需要显示加载器，直到我从两个服务获取数据。我正在使用它来显示加载程序

http://ionicframework.com/docs/api/service/ $ ionicLoading /

Plunker http://plnkr.co/edit/4k7fliaYQx3teVH326cD?p=info

Answer 1

resolve属性在ui-router解析后立即自动注入。

.controller('PlaylistsCtrl', function(getAlbum, getAtum) {
    // getAlbum and getAtum are resolved and ready to use
})

我会使用albums和atum代替getAlbum和getAtum，因为它是数据本身。
您错误地使用defer。 $http.get本身就是一种承诺。另外，success和error已弃用，请改用then。

返回$ http.get（）。then（）;

最简单的jsbin。

Answer 2

如果要在页面上显示加载微调器直到其解析。你可以做类似下面的事情。

  resolve: {
        apiData: "albumService",
        itemDetailsData: function($q, apiData) {
          console.log("Spinner on :")
          var item = apiData.getAlbums();
          if (item) {
            console.log("Spinner Off :")
            return $q.when(item);
          } else {
            return $q.reject();
          }
        }
      }

在您的控制器中，您可以将itemDetailsData作为依赖项注入。

希望这有帮助

如何在控制器加载之前加载数据？

2 个答案: