javascript AngularJS，在显示视图之前解析数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15243506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS, resolve data before showing view
提问by Laurent
This subject has been already asked but I couldn't figure out what to do in my case.
这个主题已经被问到，但我不知道在我的情况下该怎么做。
Using AngularJS 1.0.5:
使用AngularJS 1.0.5：
Before showing the view "login", I want to get some data and delay the view rendering while the data isn't loaded from an AJAX request.
在显示视图“登录”之前，我想获取一些数据并在未从 AJAX 请求加载数据时延迟视图呈现。
Here is the main code. Is it the good way?
这是主要代码。这是好方法吗？
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;
}
});
};
}
]);
回答by Laurent
The point of AngularJS is that you can load up the templates and everything and then wait for the data to load, it's meant to be asynchronous.
AngularJS 的重点是您可以加载模板和所有内容，然后等待数据加载，这意味着是异步的。
Your view should be using ng-hide, ng-show to check the scope of the controller so that when the data in the scope is updated, the view will display. You can also display a spinner so that the user doesn't feel like the website has crashed.
你的视图应该使用 ng-hide, ng-show 来检查控制器的作用域，这样当作用域中的数据更新时，视图就会显示出来。您还可以显示一个微调器，这样用户就不会觉得网站崩溃了。
回答by Bruno Peres
Answering the question, the way you are loading data explicitly before the view is rendered seems right. Remember that it may not give the best experience as there will be some time to resolve that, maybe giving an impression that your app stopped for some moments.
回答这个问题，您在呈现视图之前显式加载数据的方式似乎是正确的。请记住，它可能无法提供最佳体验，因为需要一些时间来解决该问题，可能会给人留下您的应用程序停止一段时间的印象。
See an example from John Pappa's blogto load some data before the route is resolved using angular's default router:
请参阅John Pappa 博客中的示例，以在使用 angular 的默认路由器解析路由之前加载一些数据：
// 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;
}
You basically use the resolveparameters on the route, so that routeProvider waits for all promises to be resolved before instantiating the controller. See the docsfor extra info.
您基本上使用resolve路由上的参数，以便 routeProvider 在实例化控制器之前等待所有承诺得到解决。有关额外信息，请参阅文档。
