angularjs中的初始数据加载

Posted 2023-02-19

【中文标题】angularjs中的初始数据加载

【英文标题】：initial data loading in angularjs

【发布时间】：2013-08-07 20:26:45

【问题描述】：

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

在页面加载接缝后立即请求初始数据是愚蠢的，因为您刚刚多次往返服务器以获取 css、html 和 javascript。将数据插入到页面上的 javascript 标签中，这样一个 javascript 函数可以添加初始数据是不是一个坏主意？

我特意要求使用angularjs，但如果有通用技术，也请告诉我。

【问题讨论】：

这个话题对我来说也很重要，所以我写了一些问答，可能对你有用：***.com/questions/18097923/…

@Cherniv：链接页面上的“A”很有帮助，但“Q”是这个的副本。最好直接在这个页面上回答这个问题。如果可以改进问题以使其更清晰，请随时编辑现有问题。

@EdwardBrey 请注意，我已经在专门询问与 routes 合作的问题，这部分在 bigblind 的问题中绝对没有。

@Cherniv：感谢您澄清问题之间的区别。如果您愿意，在您的问题和链接到该问题的评论中加入几句话来说明区别是有帮助的。最重要的是，为您的问题选择一个突出其不同之处的标题。

【参考方案1】：

您将在页面加载时引用您的控制器，因此您不必有内联脚本标记。

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

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

【讨论】：

是的，但是获取初始数据接缝是不必要的往返，如果它只是一个也不错，但是如果您需要来自应用程序中多个资源的数据，则更容易收集它们服务器，并将它们与 javascript 或 html 源一起发送。

@bigblind 这正是 AngularJS 等纯客户端 Web 框架和（ROCA 风格）[roca-style.org) 应用程序之间的一大区别。以及 Twitter 再次退出的原因。

【参考方案2】：

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

我知道 Angularjs 是为单页应用程序设计的。这就是为什么延迟加载数据是有意义的。

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

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

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

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

这个想法是这样的：

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

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

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

【参考方案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 属性的初始值，或者将元素的文本值作为初始值。

示例用法：

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

http://jsfiddle.net/6PNG8/ 上的工作示例

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

【参考方案4】：

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