在angularjs中加載初始數據

當構建一個每個頁面都依賴於許多數據源的Web應用程序時，獲取初始位數據的最佳方式是什麼？當我查看推特時，我發現在頁面加載時可見的推文位於HTML源代碼中，並且在向下滾動時使用AJAX加載更多推文。但是沒有方便的方式來獲取DOM中已經插入到模型中的數據。在angularjs中加載初始數據

對頁面加載後立即產生初始數據的請求接近愚蠢，因爲您剛剛向服務器進行了大量往返以獲取css，html和javascript。將數據插入頁面上的JavaScript標記是否是一個糟糕的主意，因此JavaScript函數可以添加初始數據？

我特別要求angularjs，但如果有一般技巧，請讓我知道。

來源

2013-08-06 bigblind

這個話題對我很重要，所以我寫了一些問答，可能會對你有用：http://stackoverflow.com/questions/18097923/angularjs-getting-data-inserted-in-a-dom – Cherniv

@Cherniv：鏈接頁面上的「A」是有幫助的，但「Q」是這一個的重複。最好直接在這個頁面上回答這個問題。如果可以改進問題以使其更清楚，可隨時編輯現有問題。 –

@EdwardBrey請注意，我已經具體詢問使用'routes'，這部分在bigblind的問題中絕對缺失。 – Cherniv

無論如何，您將在頁面加載時引用您的控制器，因此您不必擁有內聯腳本標記。

您可以設置默認模型，並在初始加載時使用屬性ng-bind，或調用函數傳回數據。

在angularjs中讀取數據是非常典型的。

來源

2013-08-06 17:40:11

是的，但是獲取初始數據接縫是一種不必要的往返，如果它只是一個，這並不算太壞，但如果您需要應用程序中多個資源的數據，則它更易於將它們收集在服務器上，並將它們一起發送與JavaScript或HTML源。 – bigblind

@bigblind這正是像AngularJS和（ROCA風格）[http://roca-style.org/]這樣的純客戶端Web框架應用程序之間的一個巨大差異。而Twitter之所以再次退出。 – nre

根據this question的回答，頁面上腳本標記中的JSON對象似乎是要走的路。如果ayone提出了一個更好的主意，我會接受你的答案。

來源

2013-08-06 18:31:34 bigblind

最好將Angularjs與後端的HTTP客戶端（如Zend_Http_Client或Guzzle）耦合以讓服務器獲取數據。然後，在渲染時將數據作爲json傳遞給javascript。

我知道Angularjs是爲單頁應用程序設計的。這就是懶惰加載數據的原因。

但是，如果我們要轉移到仍然動態呈現頁面的方法，並且仍然將組織內容的任務委託給Angularjs。什麼框架將適合包含AngularJS視圖。目前，項目模板像角種子都是靜態的..

也就是說，這個想法是服務器爲嵌入式json對象提供頁面。然後角色，接管客戶端，在需要的地方獲取其他內容。

因此，我們不會只有一個聯繫頁面（例如index.html），而會有幾個頁面，比如profiles.html，products.html。後端的幫助會特別有幫助，如果您的部分不會像您頁面右上角的用戶名那樣經常更改。對我而言，我認爲最好將這些數據預加載到頁面中，而不必在頁面加載後詢問服務器。

由於bigblind已經注意到，這似乎是Facebook，Gmail，Twitter等網站的做法。它們包含在頁面加載時嵌入的數據。然後，之後通過服務加載額外的內容。

的想法是一樣的東西如下：

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

後端代表查詢web服務中所呈現的頁面給客戶提供初始數據的任務。然後客戶端可以直接連接到webservice來獲取更多內容。

使用上述設置..什麼是理想的開發堆棧？

來源

2013-09-25 11:46:34 chrony

一種方法是創建一個指令，在綁定發生之前處理初始化。例如：

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

該指令或者取屬性值作爲綁定$範圍屬性的初始值，或所述元件的textvalue。

用法示例：在http://jsfiddle.net/6PNG8/

有許多闡述這樣

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

工作實例;例如將initdata解析爲json並將其與範圍合併，並使其適用於更復雜的綁定，如$root.someprop。但基礎非常簡單。

來源

2013-12-12 10:53:05 towr

在angularjs中加載初始數據

回答

相關問題