Ładowanie danych początkowych w angularjs

Question

Podczas tworzenia aplikacji internetowej, w której każda strona zależy od wielu źródeł danych, jaki jest najlepszy sposób na pobranie początkowych bitów danych? Kiedy patrzę na Twitter, widzę, że tweety widoczne na stronie ładują się w źródle HTML, a więcej tweetów jest ładowanych przy użyciu AJAX podczas przewijania w dół. Ale nie ma wygodnego sposobu na umieszczenie w modelu danych już zawartych w modelu DOM.

Złożenie wniosku o dane początkowe, natychmiast po tym, jak strony ładują się, są głupie, ponieważ właśnie wykonałeś wiele wizyt na serwerze, aby pobrać css, html i javascript. Czy byłoby źle wstawić dane do tagu javascript na stronie, więc funkcja javascript może dodać początkowe dane?

Szczególnie proszę o angularjs, ale jeśli istnieje ogólna technika, proszę, dajcie mi znać.

Answer 1

W ten sposób będziesz odwoływał się do kontrolera podczas ładowania strony, więc nie będziesz musiał mieć wbudowanego znacznika skryptu.

Można ustawić model domyślny i użyć atrybutu ng-bind przy początkowym załadowaniu lub wywołać funkcję, aby przekazać dane.

Typowe pobieranie danych po załadowaniu w angularjs.

Answer 2

Zgodnie z odpowiedziami na this question, obiekt JSON w znaczniku skryptu na stronie wydaje się być drogą do zrobienia. Jeśli ktoś wpadnie na lepszy pomysł, przyjmuję twoją odpowiedź.

Answer 3

Czy najlepiej jest połączyć Angularjs z klientem HTTP w backendu, takim jak Zend_Http_Client lub Guzzle, aby serwer mógł pobrać dane. Następnie przekazuj dane jako json do javascript podczas renderowania.

Wiem, że Angularjs jest przeznaczony do aplikacji na jedną stronę. To dlatego ma sens, że leniwca ładuje dane.

Jeśli jednak przejdziemy do podejścia, w którym wciąż dynamicznie renderujemy stronę i nadal delegujemy zadanie organizowania treści do Angularjs. Jakie ramy będą odpowiednie do przechowywania widoków AngularJS. W tej chwili szablony projektów, takie jak posiewy kątowe, są statyczne.

To znaczy, pomysł polega na tym, że serwer obsługuje stronę z osadzonym obiektem Json. Następnie kątowa, przejmuje po stronie klienta, Pobieranie dodatkowej treści tam, gdzie jest to potrzebne.

Więc zamiast jednej strony kontaktu (np. Index.html) mielibyśmy kilka stron takich jak profiles.html, products.html. Pomocnik byłby szczególnie pomocny, jeśli masz sekcję, która nie zmienia się często jak Twoja nazwa użytkownika w prawym górnym rogu strony. Dla mnie po prostu uważam, że lepiej jest załadować te dane na twoją stronę i nie trzeba pytać serwera po załadowaniu strony.

Jak zauważył bigblind, wygląda na to, że robią to strony takie jak Facebook, Gmail, Twitter. Zawierają dane osadzone przy ładowaniu strony. Następnie załaduj dodatkową zawartość za pośrednictwem usług później.

Pomysł jest coś takiego jak poniżej:

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

Backend delegaci Zadaniem odpytywanie usługa zapewnić wstępne dane na stronie świadczonych na rzecz klienta. Następnie klient może bezpośrednio połączyć się z usługą internetową, aby pobrać dodatkową zawartość.

Korzystanie z powyższej konfiguracji. Jaki jest idealny stos programistyczny?

Answer 4

Jednym ze sposobów na zrobienie tego jest utworzenie dyrektywy, która obsługuje inicjalizację przed wykonaniem wiązania. Na przykład:

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

Dyrektywa ta zajmuje albo wartość atrybutu jako wartość początkową dla związanego własności $ zakresu, lub TextValue elementu.

Przykład użycia:

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

przykład Praca na http://jsfiddle.net/6PNG8/

Istnieje wiele sposobów, aby wypracować w tej sprawie; na przykład parsowanie initdata jako json i łączenie go z zasięgiem i sprawdzenie, czy działa dla bardziej skomplikowanych powiązań, takich jak $root.someprop. Ale podstawa jest niezwykle prosta.