AngularJS，在显示视图前解析数据

这个问题已经被问到，但我无法弄清楚在我的情况下该怎么做。AngularJS，在显示视图前解析数据

使用AngularJS 1.0.5：

显示视图“登陆”之前，我想要得到的一些数据和延迟视图呈现，而数据不是从一个AJAX请求加载。

以下是主要代码。这是好方法吗？

angular.module('tfc', ['tfc.config', 'tfc.services', 'tfc.controllers']).config([ 
'$routeProvider', '$locationProvider', '$httpProvider', 
function($routeProvider, $locationProvider, $httpProvider) { 
    $routeProvider.when('/login', { 
    templateUrl: 'views/login.html', 
    controller: "RouteController", 
    resolve: { 
     data: function(DataResolver) { 
     return DataResolver(); 
     } 
    } 
    }); 
} 
]); 

module_services = angular.module("tfc.services", []); 

module_services.factory("DataResolver", [ 
"$route", function($route) { 
    console.log("init"); 
    return function() { 
    // Tabletop is a lib to get data from google spreadsheets 
    // basically this is an ajax request 
    return Tabletop.init({ 
     key: "xxxxx", 
     callback: function(data, tabletop) { 
     console.log("[Debug][DataResolver] Data received!"); 
     return data; 
     } 
    }); 
    }; 
} 
]);

来源

2013-03-06 Laurent

也许来自AngularJS的创建者的答案可以帮助你：http://stackoverflow.com/a/11972028/449162 – L42y 2013-03-06 13:22:52

你也可以将AJAX请求的结果分配给你的$ scope中的某些东西，并使用ng-show HTML。 – boxed 2013-03-06 16:00:01

这是一个非常可靠的方法。它比使用ng-show或ng-hide更好，因为在你的控制器中，你已经拥有了你的数据并且可以编写更多的同步代码。也就是说，这比代码审查网站更适合SO，因为你没有问题，只是寻找代码的改进。 – 2014-07-31 23:58:17

AngularJS的意义在于你可以加载模板和一切，然后等待数据加载，它意味着是异步的。

您的视图应该使用ng-hide，ng-show来检查控制器的范围，以便当范围中的数据更新时，视图将显示。您还可以显示一个微调，这样用户就不会觉得网站崩溃了。

来源

2014-07-31 23:53:31

当您加载数据以显示在视图中时，我可以看到您的观点，但您可能需要取消基于异步加载的路由 – 2015-07-14 18:31:35

回答这个问题，您在显示视图之前显式加载数据的方式似乎是正确的。请记住，它可能不会提供最好的体验，因为有一段时间才能解决问题，也许会让人觉得应用停止了一段时间。

请参阅从John Pappa's blog一个例子来装载一些数据之前的路由采用了棱角分明的默认路由器解决：

// route-config.js 
angular 
    .module('app') 
    .config(config); 

function config($routeProvider) { 
    $routeProvider 
     .when('/avengers', { 
      templateUrl: 'avengers.html', 
      controller: 'Avengers', 
      controllerAs: 'vm', 
      resolve: { 
       moviesPrepService: function(movieService) { 
        return movieService.getMovies(); 
       } 
      } 
     }); 
} 

// avengers.js 
angular 
    .module('app') 
    .controller('Avengers', Avengers); 

Avengers.$inject = ['moviesPrepService']; 
function Avengers(moviesPrepService) { 
    var vm = this; 
    vm.movies = moviesPrepService.movies; 
}

你基本上使用的路径上的resolve参数，使routeProvider等待所有承诺得到解决在实例化控制器之前。请参阅docs了解更多信息。

来源

2015-07-14 19:38:23

使用UI路由器时，请在查看声明状态时的“resolve”属性文档：http ：//angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider#methods_state – 2015-07-14 19:42:27

AngularJS，在显示视图前解析数据

回答

相关问题