angular-ui-路由解析 angularJS 工厂

Question

我正在尝试将 $stateProvider 解析与我创建的工厂一起使用

出于某种原因，工厂的承诺是一个空对象

但是当我从 $http 调用中记录数据时，我从我的 .json 文件中获取数据

知道为什么我的 defer.promise 是一个空对象吗？

playlistsService.js

(function () {
    'use strict';

    angular
        .module('app.core')
        .factory('playlistsService', playlistsService);

    playlistsService.$inject = ['$http', '$q'];

    /* @ngInject */
    function playlistsService($http, $q) {
        var service = {
            loadPlaylists : loadPlaylists
        };

        return service;

        ////////////////

        function loadPlaylists() {
            var defer = $q.defer();
            $http.get('data/playlists.json')
                .success(function (data) {
                    console.log('json data: ' + angular.toJson(data));
                    defer.resolve(data);
                });
            console.log('defer.promise: ' + angular.toJson(defer.promise));
            return defer.promise;
        }
    }

})();

playlists.js

(function () {
    'use strict';

    angular
        .module('app.playlists')
        .config(stateProvider)
        .controller('Playlists', Playlists);

    stateProvider.$inject = ['$stateProvider'];
    Playlists.$inject = ['playlistsService'];

    /* @ngInject */
    function stateProvider($stateProvider){
        $stateProvider
            .state('app.playlists', {
                url: '/playlists',
                views: {
                    'menuContent': {
                        templateUrl: 'app/playlists/playlists.html',
                        controller: 'Playlists as vm',
                        resolve: {
                            playlists: function(playlistsService){
                                return playlistsService.loadPlaylists();
                            }
                        }
                    }
                }
            })
    }

    /* @ngInject */
    function Playlists(playlists) {
        /* jshint validthis: true */
        var vm = this;

        vm.activate = activate;
        vm.title = 'Playlists';
        vm.playlists = playlists;

        activate();

        ////////////////

        function activate() {
            console.log('playlists object: ' + angular.toJson(vm.playlists))
            console.log('playlists from service: ' + angular.toJson(playlists))
        }


    }

})();

Answer 1

你的 Playlists 控制器应该有 $inject 在 resolve 函数中创建的 playlists promise 而不是 playlistsService 就可以了。

Playlists.$inject = ['playlists'];

更新

您还可以利用 $http.get 创建的承诺，而不是创建自定义承诺。

服务

function loadPlaylists() {
     return $http.get('data/playlists.json')
     .then(function (data) {
         console.log('json data: ' + angular.toJson(data));
         return data;
     });
}

解决

resolve: {
    playlists: function(playlistsService){
         return playlistsService.loadPlaylists();
    }
}