angularjs首先获取应用程序数据

angularjs fetch app data firstly

本文关键字:应用程序 数据 获取 angularjs      更新时间:2023-09-26

我的应用程序中有几个视图&我想让用户在这些视图之间切换,而不会因为从后端服务器获取数据而延迟所需数据在$routeProvider中定义我如何以优雅的方式交付解决方案,该解决方案将在角度加载后从服务器获取数据,并使这些数据可用于$routeProvider

我的想法不起作用,因为:

  1. 我可以把代码放在一些主控制器中,但$routeProvider中没有$scope
  2. 我可以把获取数据的代码放在一些Factory类中,如下所示:
APP.factory('DataFactory', function($q,KAS){
return {
    data:new Array(),
    fetchData:function(){
        var albums=$q.defer();
        var artists=$q.defer();
        var genres=$q.defer();
        albums.resolve(KAS.api({action:'get_albums'}));
        artists.resolve(KAS.api({action:'get_artists'}));
        genres.resolve(KAS.api({action:'get_genres'}));
        var data=$q.all([albums.promise, artists.promise, genres.promise]);
        data.then(function(retv){
            angular.forEach(retv, function(value, key){
                data[key]=(value.data.response);
            });
        });
    },
    getData:function(){
        return data;
    }
}
});

但是getData函数没有访问数据数组-我不能引用数据属性。事实上,这是显而易见的,因为我正在返回函数/对象的数组。但我把它贴在上面是为了了解我真正想做什么。

我如何以优雅的方式交付解决方案,该解决方案将在角度加载后从服务器获取数据,并使这些数据可用于$routeProvider

您正在创建变量(var data),而不是分配给对象的属性。JavaScript认为您使用的是一个名为data的变量,但实际上您引用的是返回的对象的属性数据。

APP.factory('DataFactory', function($q,KAS){
    var myFactory = {
        data:new Array(),
        fetchData:function(){
            var albums=$q.defer();
            var artists=$q.defer();
            var genres=$q.defer();
            albums.resolve(KAS.api({action:'get_albums'}));
            artists.resolve(KAS.api({action:'get_artists'}));
            genres.resolve(KAS.api({action:'get_genres'}));
            myFactory.data = $q.all([albums.promise, artists.promise, genres.promise]);
            myFactory.data.then(function(retv){
                angular.forEach(retv, function(value, key){
                    this.data[key]=(value.data.response);
                });
            });
        },
        getData:function(){
            return myFactory.data;
        }
    };
    return myFactory;
});