initiales Laden von Daten in angularjs

Question

Wenn Sie eine Webanwendung erstellen, bei der jede Seite von vielen Datenquellen abhängt, was ist der beste Weg, um die ersten Daten zu holen? Wenn ich auf Twitter schaue, sehe ich, dass die Tweets, die beim Laden der Seite sichtbar sind, in der HTML-Quelle sind, und mehr Tweets werden mit AJAX geladen, während Sie nach unten scrollen. Es gibt jedoch keine praktische Möglichkeit, Daten, die bereits im DOM enthalten sind, in das Modell einzufügen.

Eine Anfrage nach den Anfangsdaten, sofort nach dem Laden der Seite dumm, weil Sie gerade eine Menge Rundreisen zum Server gemacht haben, um CSS, HTML und Javascript zu holen. Wäre es eine schlechte Idee, die Daten in ein Javascript-Tag auf der Seite einzufügen, sodass eine JavaScript-Funktion die Anfangsdaten hinzufügen kann?

Ich bitte speziell um angularjs, aber wenn es eine allgemeine Technik gibt, lass es mich auch wissen.

Answer 1

Sie werden beim Laden der Seite trotzdem auf Ihren Controller verweisen, so dass Sie kein Inline-Skript-Tag benötigen.

Sie können entweder ein Standardmodell festlegen und beim erstmaligen Laden das Attribut ng-bind verwenden oder eine Funktion aufrufen, um Daten zurückzugeben.

Es ist ziemlich typisch, Daten auf Last in angularjs zu holen.

Answer 2

Laut den Antworten auf this question scheint ein JSON-Objekt in einem Skript-Tag auf der Seite der Weg zu sein. Wenn jemand eine bessere Idee hat, werde ich deine Antwort akzeptieren.

Answer 3

Wäre es am besten, Angularjs mit einem HTTP Client im Backend wie Zend_Http_Client oder Guzzle zu koppeln, damit der Server die Daten holen kann. Übergeben Sie dann die Daten als json an Javascript beim Rendern.

Ich weiß, Angularjs ist für Single-Page-Anwendungen konzipiert. Deshalb macht es Sinn, dass es die Daten faul lädt.

Wir gehen jedoch zu dem Ansatz über, bei dem wir die Seite immer noch dynamisch rendern und die Aufgabe, den Inhalt zu organisieren, an Angularjs delegieren. Welcher Rahmen wird geeignet sein, die AngularJS-Ansichten zu enthalten. Derzeit sind Projektvorlagen wie angular-seed alle statisch.

Das ist, die Idee ist der Server dient eine Seite mit dem eingebetteten JSON-Objekt. Dann eckig, übernimmt auf der Clientseite das Holen zusätzlicher Inhalte wo nötig.

Also statt einer einzigen Seite des Kontakts (z. B. index.html), hätten wir mehrere Seiten wie profiles.html, products.html. Die Hilfe des Backends wäre besonders hilfreich, wenn Sie sagen, dass Sie einen Bereich haben, der sich nicht oft ändert, wie Ihr Benutzername oben rechts auf der Seite. Für mich ist es einfach besser, diese Daten auf Ihrer Seite vorinstalliert zu haben und den Server nach dem Laden der Seite nicht zu fragen.

Wie bigblind bemerkt haben, scheint dies die Art und Weise Websites wie Facebook, Gmail, Twitter tut es. Sie enthalten die beim Laden der Seite eingebetteten Daten. Laden Sie anschließend zusätzlichen Inhalt über Dienste.

Die Idee ist so etwas wie unten:

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

Backend delegiert die Aufgabe, den Webservice von Abfragen von Ausgangsdaten in der gerenderten Seite an den Client zu liefern. Dann kann sich der Client direkt mit dem Webservice verbinden, um weitere Inhalte abzurufen.

Verwendung der oben genannten Konfiguration. Was ist der ideale Entwicklungsstack?

Answer 4

Eine Möglichkeit ist es, eine Direktive zu erstellen, die die Initialisierung vor dem Binden behandelt. Zum Beispiel:

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

Diese Richtlinie nimmt entweder den Attributwert als Anfangswert für die gebundene Umfang Eigenschaft $ oder den Textwert des Elements.

Beispiel Nutzung:

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

Arbeitsbeispiel auf http://jsfiddle.net/6PNG8/

Es gibt zahlreiche Art und Weise auf diese zu erarbeiten; zum Beispiel das Parsen der initdata als json und das Zusammenführen mit dem scope, und damit es für kompliziertere Bindungen funktioniert, wie $root.someprop. Aber die Basis ist bemerkenswert einfach.