javascript angularjs 中的初始数据加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18086823/
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
initial data loading in angularjs
提问by bigblind
When building a web app where every page depends on many data sources, what's the best way to fetch the initial bits of data? When I look at twitter, I see the tweets that are visible on page load are in the HTML source, and more tweets are loaded in using AJAX as you scroll down. But there's no convenient way to get data that's already in the DOM to be inserted into the model.
在构建每个页面都依赖于许多数据源的 Web 应用程序时，获取初始数据位的最佳方法是什么？当我查看 twitter 时，我看到页面加载时可见的推文在 HTML 源中，当您向下滚动时，使用 AJAX 加载了更多推文。但是没有方便的方法可以将 DOM 中已经存在的数据插入到模型中。
Making a request for the initial data, immediately after page load seams stupid, because you've just made a lot of roundtrips to the server to fetch css, html and javascript. Would it be a bad idea to insert the data into a javascript tag on the page, so a javascript function can add the initial data?
在页面加载接缝之后立即请求初始数据很愚蠢，因为您刚刚对服务器进行了大量往返以获取 css、html 和 javascript。将数据插入到页面上的 javascript 标记中，以便 javascript 函数可以添加初始数据是不是一个坏主意？
I'm specifically asking for angularjs, but if there's an general technique, please let me know as well.
我特别要求 angularjs，但如果有通用技术，也请告诉我。
采纳答案by Christopher Marshall
You'll be referencing your controller anyway on page load, so you won't have to have an inline script tag.
无论如何，您将在页面加载时引用您的控制器，因此您不必具有内联脚本标记。
You can either set a default model and use the attribute ng-bindon initial load, or call a function to pass back data.
您可以设置默认模型并在初始加载时使用属性ng-bind，或者调用函数来传回数据。
It's pretty typical to fetch data on load in angularjs.
在 angularjs 中获取加载数据是非常典型的。
回答by chrony
Would it be best to couple Angularjs with an HTTP Client in the backend like Zend_Http_Client or Guzzle to let the server fetch the data. Then, pass the data as json to javascript upon render.
最好将 Angularjs 与后端的 HTTP 客户端（如 Zend_Http_Client 或 Guzzle）结合起来，让服务器获取数据。然后，在渲染时将数据作为 json 传递给 javascript。
I know Angularjs is designed for Single Page applications. That's why it makes sense that it lazy loads the data.
我知道 Angularjs 是为单页应用程序设计的。这就是为什么它延迟加载数据是有道理的。
However, if we're going to move to the approach where we still render the page dynamically and still delegate the task of organizing the content to Angularjs. What framework will be suitable to contain the AngularJS views. Right now, project templates like angular-seed are all static..
但是，如果我们要转向仍然动态呈现页面并将组织内容的任务委托给 Angularjs 的方法。什么框架适合包含 AngularJS 视图。现在，像 angular-seed 这样的项目模板都是静态的。
That is, the idea is the server serves a page with the embedded json object. Then angular, takes over in the client side, Fetching additional content where needed.
也就是说，这个想法是服务器提供一个带有嵌入 json 对象的页面。然后 angular，在客户端接管，在需要的地方获取额外的内容。
So instead of just a single page of contact (e.g: index.html), we would have several pages like profiles.html, products.html. The help of the backend would be particularly helpful say you have a section which doesn't change often like your username on the top right side of the page. For me, I just think it's better to have these data preloaded in your page and not have to ask the server after the page has been loaded.
因此，我们将有多个页面，如profiles.html、products.html，而不是只有一个联系人页面（例如：index.html）。后端的帮助会特别有用，比如您有一个部分不会像页面右上角的用户名那样经常更改。对我来说，我只是认为最好将这些数据预加载到页面中，而不必在页面加载后询问服务器。
As bigblind have noticed, this seems to be the way sites like facebook, gmail, twitter does it. They contain the data embedded on page load. Then, load additional content via services afterwards.
正如 bigblind 所注意到的，这似乎是 facebook、gmail、twitter 等网站的做法。它们包含嵌入在页面加载中的数据。然后，之后通过服务加载其他内容。
The idea is something like below:
这个想法是这样的：
Webservice <---------- Backend------------> Frontend
<------------------------------------------
Backend delegates the task of querying the webservice to provide initial data in the rendered page to the client. Then client, can directly connect to webservice to fetch additional content.
后端将查询 Web 服务的任务委托给客户端，以在呈现的页面中提供初始数据。然后客户端，可以直接连接到 webservice 来获取额外的内容。
Using the above setup.. What is the ideal development stack?
使用上述设置.. 理想的开发堆栈是什么？
回答by towr
One way to do it is to create a directive that handles the initialization before binding happens. For example:
一种方法是创建一个指令，在绑定发生之前处理初始化。例如：
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();
}
}
};
});
This directive takes either the attribute value as initial value for the bound $scope property, or the textvalue of the element.
该指令将属性值作为绑定的 $scope 属性的初始值，或者元素的文本值。
Example usage:
用法示例：
<div initdata="Foo Bar" ng-bind="test1"></div>
<div initdata ng-bind="test2">Lorem Ipsem</div>
Working example on http://jsfiddle.net/6PNG8/
http://jsfiddle.net/6PNG8/ 上的工作示例
There's numerous way to elaborate on this; for example parsing the initdata as json and merging it with the scope, and making it work for more complicated binds, like $root.someprop. But the basis is remarkably simple.
有很多方法可以详细说明这一点；例如将 initdata 解析为 json 并将其与范围合并，并使其适用于更复杂的绑定，例如$root.someprop. 但其基础非常简单。
回答by bigblind
According to the answers on this question, a JSON object in a script tag on the page seems to be the way to go. If ayone comes up with a better idea, I'll accept your answer.
根据this question的答案，页面上脚本标记中的JSON对象似乎是要走的路。如果有人想出更好的主意，我会接受你的回答。
