AngularJS，显示视图之前解决数据 [英] AngularJS, resolve data before showing view

问题描述

该课题已经被问，但我无法弄清楚如何在我的情况下做的。

使用的 AngularJS 1.0.5

显示视图登录，我想要得到的一些数据和延缓视图呈现，而数据未从一个AJAX请求加载。之前

下面是主要的code。这是不是好办法？

  angular.module（'TFC'，['tfc.config'，'tfc.services'，'tfc.controllers']）。配置（[
 '$ routeProvider'，'$ locationProvider'，'$ httpProvider'，
 功能（$ routeProvider，$ locationProvider，$ httpProvider）{
  $ routeProvider.when（'/登录'，{
    templateUrl：意见/ login.html的，
    控制器：RouteController
    解析：{
      数据：功能（DataResolver）{
        返回DataResolver（）;
      }
    }
  }）;
}
]）;module_services = angular.module（tfc.services，[]）;module_services.factory（DataResolver，[
 $路线，函数（$路径）{
  的console.log（INIT）;
  返回功能（）{
    //桌面是一个lib摆脱谷歌小号preadsheets数据
    //基本上这是一个Ajax请求
    返回Tabletop.init（{
      键：XXXXX，
      回调：功能（数据，桌面）{
        的console.log（[调试] [DataResolver]获得的数据！）;
        返回的数据;
      }
    }）;
  };
 }
]）;
 

解决方案

AngularJS的一点是，你可以加载模板和一切，然后等待数据加载，它的意思是异步的。

您认为应该用NG隐藏，NG-秀检查控制器的范围，这样，在范围内的数据被更新，视图就会显示出来。您还可以显示一个微调，使用户感觉并不像该网站已崩溃。

This subject has been already asked but I couldn't figure out what to do in my case.

Using 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.

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

解决方案

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.

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.

这篇关于AngularJS，显示视图之前解决数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！