caricamento iniziale dei dati in angularjs

Question

Quando si crea un'app Web in cui ogni pagina dipende da molte origini dati, qual è il modo migliore per recuperare i primi bit di dati? Quando guardo Twitter, vedo che i tweet che sono visibili al caricamento della pagina si trovano nel codice sorgente HTML e più tweet vengono caricati nell'uso di AJAX mentre scorri verso il basso. Ma non esiste un modo conveniente per ottenere dati già presenti nel DOM da inserire nel modello.

Effettuare una richiesta per i dati iniziali, immediatamente dopo che le pagine di caricamento del carico sono state stupide, perché hai appena effettuato molti roundtrip sul server per recuperare css, html e javascript. Sarebbe una cattiva idea inserire i dati in un tag javascript sulla pagina, quindi una funzione javascript può aggiungere i dati iniziali?

Sto chiedendo specificamente per angularjs, ma se c'è una tecnica generale, per favore fatemelo sapere pure.

Answer 1

Si farà riferimento al controller in ogni caso al caricamento della pagina, quindi non sarà necessario disporre di un tag script in linea.

È possibile impostare un modello predefinito e utilizzare l'attributo ng-bind al caricamento iniziale oppure chiamare una funzione per ritrasferire i dati.

È piuttosto tipico recuperare i dati sul carico in angularjs.

Answer 2

In base alle risposte su this question, un oggetto JSON in un tag di script nella pagina sembra essere la strada da percorrere. Se qualcuno ti viene in mente un'idea migliore, accetterò la tua risposta.

Answer 3

È consigliabile accoppiare Angularjs con un client HTTP nel backend come Zend_Http_Client o Guzzle per consentire al server di recuperare i dati. Quindi, passa i dati come json in javascript al rendering.

So che Angularjs è progettato per applicazioni di pagina singola. Ecco perché ha senso che pigri carichi i dati.

Tuttavia, se si passa all'approccio in cui viene ancora visualizzata la pagina in modo dinamico e si continua a delegare il compito di organizzare il contenuto in Angularjs. Quale framework sarà adatto a contenere le viste AngularJS. In questo momento, i modelli di progetto come angular-seed sono tutti statici ..

Cioè, l'idea è che il server serva una pagina con l'oggetto json incorporato. Quindi angolare, prende il sopravvento sul lato client, recuperando il contenuto aggiuntivo dove necessario.

Quindi invece di una sola pagina di contatto (ad esempio index.html), avremmo diverse pagine come profiles.html, products.html. L'aiuto del back-end sarebbe particolarmente utile se hai una sezione che non cambia spesso come il tuo nome utente nella parte in alto a destra della pagina. Per me, penso che sia meglio avere questi dati precaricati nella tua pagina e non dover chiedere al server dopo che la pagina è stata caricata.

Come ha notato Bigblind, questo sembra essere il modo in cui siti come Facebook, Gmail, Twitter lo fa. Contengono i dati incorporati nel caricamento della pagina. Quindi, caricare i contenuti aggiuntivi tramite i servizi in seguito.

L'idea è qualcosa di simile di seguito:

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

backend delegati il ​​compito di interrogare il webservice di fornire dati iniziali nella pagina reso al cliente. Quindi il client, può connettersi direttamente al webservice per recuperare contenuti aggiuntivi.

Utilizzo dell'impostazione precedente .. Qual è lo stack di sviluppo ideale?

Answer 4

Un modo per farlo è creare una direttiva che gestisca l'inizializzazione prima che avvenga l'associazione. Per esempio:

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

Questa direttiva accetta sia il valore attributo come valore iniziale per la proprietà $ ambito legato, o textValue dell'elemento.

Esempio di utilizzo:

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

esempio Lavorare su http://jsfiddle.net/6PNG8/

C'è numerosi modo per elaborare su questo; per esempio, analizzare l'initdata come json e unirlo all'ambito e farlo funzionare per collegamenti più complicati, come $root.someprop. Ma la base è straordinariamente semplice.