Question

在构建每个页面依赖于许多数据源的Web应用程序时，获取初始数据位的最佳方法是什么？当我查看twitter时，我看到页面加载时可见的推文在HTML源代码中，当您向下滚动时，使用AJAX会加载更多推文。但是没有方便的方法来获取已经插入到模型中的DOM中的数据。

在页面加载接缝后立即发出初始数据请求，因为你刚刚向服务器进行了大量往返以获取css，html和javascript。将数据插入页面上的javascript标记是不是一个坏主意，所以javascript函数可以添加初始数据吗？

我特意要求angularjs，但如果有一般技巧，请告诉我。

Answer 1

您无论如何都会在页面加载时引用您的控制器，因此您不必拥有内联脚本标记。

您可以设置默认模型并在初始加载时使用属性ng-bind，也可以调用函数来传回数据。

在angularjs中获取加载数据非常典型。

Answer 2

最好将Angularjs与后端的HTTP客户端结合起来，如Zend_Http_Client或Guzzle，让服务器获取数据。然后，在渲染时将数据作为json传递给javascript。

我知道Angularjs是专为单页应用程序设计的。这就是它延迟加载数据的原因。

但是，如果我们要转向我们仍然动态呈现页面的方法，并仍然将组织内容的任务委托给Angularjs。什么框架适合包含AngularJS视图。现在，像angular-seed这样的项目模板都是静态的..

也就是说，这个想法是服务器提供带有嵌入式json对象的页面。然后是角度，接管客户端，在需要的地方获取其他内容。

因此，我们将有几个页面，例如profiles.html，products.html，而不仅仅是一个单一的联系页面（例如：index.html）。后端的帮助会特别有用，比如你有一个不经常更改的部分，就像页面右上角的用户名一样。对我来说，我认为最好将这些数据预先加载到您的页面中，而不必在页面加载后询问服务器。

正如bigblind所注意到的，这似乎是像facebook，gmail，twitter这样的网站。它们包含页面加载中嵌入的数据。然后，之后通过服务加载其他内容。

这个想法如下：

Webservice <---------- Backend------------> Frontend
     <------------------------------------------

后端委托查询Web服务的任务，以将呈现的页面中的初始数据提供给客户端。然后客户端可以直接连接到webservice以获取其他内容。

使用上面的设置..什么是理想的开发堆栈？

Answer 3

一种方法是创建一个在绑定发生之前处理初始化的指令。例如：

app.directive('initdata', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            if ( attrs.ngBind !== undefined)
            {
                $scope[attrs.ngBind] = attrs.initdata ? attrs.initdata : element.text();
            }
        }
    };
});

此伪指令将属性值作为绑定$ scope属性的初始值或元素的textvalue。

使用示例：

<div initdata="Foo Bar" ng-bind="test1"></div>
<div initdata ng-bind="test2">Lorem Ipsem</div>

http://jsfiddle.net/6PNG8/

上的工作示例

有很多方法可以详细说明这一点;例如，将initdata解析为json并将其与范围合并，并使其适用于更复杂的绑定，例如$root.someprop。但基础非常简单。

Answer 4

根据this question上的答案，页面上的脚本标记中的JSON对象似乎是要走的路。如果有人想出更好的主意，我会接受你的回答。

angularjs中的初始数据加载

4 个答案: