AngularJS e Play Framework modello di associazione e modelli

Question

Mi chiedevo se qualcuno ha trovato un buon modo per legare il modello tra Play Framework e AngularJS. Ad esempio, si colpisce un URL e la pagina viene generata da Play Framework utilizzando i modelli sul lato server per un determinato oggetto Person. Ora si desidera utilizzare AngularJS per abilitare la ricca esperienza utente e utilizzare tale oggetto Person all'interno dei modelli JavaScript/AngularJS sul lato client.

Un modo per farlo sarebbe quello di effettuare un'altra chiamata Ajax da AngulraJS e popolare il modello JS. Questo sembra ridondante con la prima chiamata per generare la pagina per quell'oggetto Person.

Un altro modo sarebbe quello di fare qualcosa di simile:

person = @Html(FrontEnd.personToJSON(thisPersonObject)); 

Ma allora avete bisogno di impostare l'oggetto persona all'interno del $scope. Inoltre questo sembra un hack dato che l'intero oggetto è in formato JSON, verrà inserito nella pagina html.

So che esistono modi migliori per progettare questa applicazione Web, ad esempio utilizzando SPA design in cui Play è solo un livello di servizio con un'API pulita per il recupero e la manipolazione dei dati. Questo ti permetterà di fare MVC rigorosamente sul lato client.

Qualche idea?

Answer 1

Quello che hai proposto è un approccio praticabile con AngularJS. Un'altra soluzione sarebbe quella di eseguire il codice javascript sul lato server, e quindi inviare l'output al browser (simile a Airbnb Rendr di Airbnb). Tuttavia, nulla di simile esiste che io conosca per AngularJS. Potrebbe non essere possibile a causa del modo in cui vengono gestiti gli ambiti.

Con l'approccio javascript dell'oggetto bootstrap, è semplice ed evita di visitare il server due volte.

Quindi,

1. costruire la vostra applicazione come un client SPA che consuma un'API REST.
2. Utilizzando il modello sul lato server, esegue il rendering di un oggetto javascript aggiuntivo con i dati che si desidera eseguire il bootstrap e includerlo nella pagina (o in un altro file js).
3. Sul front-end, trasferire i dati da questo oggetto javascript bootstrap nel modello $ resource.

Vedere questa domanda simile con AngularJS e Rails.
How to bootstrap data as it it were fetched by a $resource service in Angular.js

Per SEO, utilizzare questo AngularJS SEO guide [1]. Questa guida è stata menzionata dagli ingegneri di AngularJS presso Google I/O [2].

[1] http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
[2] http://www.youtube.com/watch?feature=player_detailpage&v=HCR7i5F5L8c#t=2238

Answer 2

Angular è stato progettato per essere un'applicazione singola, quindi è consigliabile evitare di eseguire il bootstrap della pagina già con i dati. Invece, dovresti fornire un'API riposante con il tuo framework e utilizzare angular's resources o qualche alternativa (ad esempio restangular) per ricevere e inviare dati dal server.

Per riassumere: l'applicazione/il sito devono comunicare solo con il framework utilizzando l'api.

Answer 3

Per un'applicazione web che sto costruendo abbiamo provato a usare socket.io e template engine Smarty quando faccio una chiamata al server specifico uno Smarty. file tpl che voglio che il server esegua il rendering e poi restituisce il front-end alla finitura html. Ho usato il modello di smarty richiesto per gestire i loop e così via e ho inserito nel manubrio e nei ng-click dove so che ne avrò bisogno, e poi quando l'html ritorna al front end lo compilo per l'ambito pertinente e lo inietto nel DOM.

Ho trovato che questo è un approccio errato, anche se, come la persona di cui sopra, Angular è stato pensato per essere una soluzione lato client e cercando di fare qualcosa di simile è davvero solo confondere l'acqua.

Se si sta tentando di pasticciare con capire un modo per il back-end per rendere modello angolare perché siete preoccupati per i problemi di prestazioni Vi suggerisco di guardare nella costruzione di se stessi una serie di direttive personalizzati che ridurrà la quantità di ascoltatori di orologi che si aggiunge alla pagina legando i dati solo una volta dove è necessario.

Answer 4

Attraverso Riproduci, il seed finale (https://github.com/angyjoe/eventual) recupera un oggetto Celebrity come JSON. I campi di questo JSON vengono quindi comunicati ai modelli AngularJS in una pagina HTML. Quindi, fai a meno dei modelli di Scala e sopravvivi con ricchezza AngularJS sul lato client.