基于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 --已经用解析函数而不是playlistsService创建的playlists承诺--将起作用。

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();
    }
}