3

如何使用 Angular 尽快开始从服务器获取数据？

目前，我的大部分页面都是通过放置在根元素的指令“fooload”异步填充的：

<html lang="en" ng-app="myapp" fooload ng-controller="MyAppCtrl">
    <head>
        /* bunch of CSS, and other resources */
    </head>

它通过 http GET 请求将数据加载到范围内：

angular.module('myapp.directives').
   directive('fooload', function ($http) {
     return {
         link: function (scope, elm, attrs) {
             $http.get('/foo').success(function (data) {
             scope.foo = data;
     });
     }
     };
});

查看网络面板，这个调用是在请求 head 中引用的资源之后在浏览器中进行的。如何在页面加载时尽快调用加载 /foo 数据（如果可能，甚至在加载角度本身之前）？

4

3 回答 3

1

我通过以下方式解决了这个问题：

a）甚至在角度加载之前获取数据并将其存储在全局变量中（我讨厌使用全局变量，但我想不出另一种方式。）

b）在加载此数据时手动引导角度（我的应用程序在没有数据的情况下根本无法工作）

        var $data;
        var ajax_transport = new XMLHttpRequest();

        // Callback for AJAX call
        function responseProcess() {
            if (ajax_transport.readyState !== 4) {
                return;
            }
            if (ajax_transport.responseText) {
                $data = JSON.parse(ajax_transport.responseText);
                    angular.bootstrap(document, ['myApp']);
                });
            }
        }
        // Sending request
        ajax_transport.open("GET", "/mydata", true);
        ajax_transport.onreadystatechange = responseProcess;
        ajax_transport.send();

注意：删除模板中的标记 ng-app="myapp" 以避免自动引导非常重要。

c）在我的角度应用程序中使用数据：

        scope.setupSomething($data);

d) 此外，为了确保此数据调用在任何其他资源加载之前开始，我开始使用资源加载器。我最喜欢 HeadJs ( http://headjs.com/ )，但有角度的人似乎喜欢 script.js ( https://github.com/angular/angular-phonecat/blob/master/app/index-async .html )

欢迎批评或改进。

于 2013-05-24T22:00:52.603 回答
1

这与 Angular 并没有真正的关系，显然 Angular 无法在 Angular 加载自身之前开始加载文件。但是，如果资源（例如/foo）可以被浏览器缓存，您可以将其添加到清单文件中：http: //www.html5rocks.com/en/tutorials/appcache/beginner/

于 2013-04-16T20:13:21.550 回答
0

首先创建一个获取资源的新服务，然后在服务器成功回调时引导文档以获取角度。

angular.element(document).ready(function() {
   calllService(function () {
      angular.bootstrap(document);
   });
});

https://stackoverflow.com/a/12657669/1885896

于 2013-04-16T20:21:32.073 回答