javascript - 如何在 Controller 加载之前加载数据？

Question

如何在加载 View 和 Controller 之前从服务获取数据。我喜欢这样

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 和 View 之前从服务中获取数据。

.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/

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

Answer 1

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

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

1. 我会使用 albums 和 atum 而不是 getAlbum 和 getAtum 因为它本身就是数据。

2. 您错误地使用了defer。 $http.get 本身就是一个 promise 。此外，success 和 error 已弃用，请改用 then。

   返回 $http.get().then();

最简单 jsbin .