2013-04-21 22 views
9

Sto facendo un'app con jQuery Mobile e Angular.js. Perché abbiamo alcuni problemi con entrambe le librerie, esiste un adapter che fa "il lavoro".Angular.js con jQuery Mobile

Quindi sto provando a utilizzare routeProvider per il routing delle mie pagine. Ma non riesco ancora a visualizzare le pagine usando questo.

Qui plunker se puoi aiutarmi a indicarmi la strada.

http://plnkr.co/edit/DNGiT83csWMmfYnHXOop

Grazie in anticipo!

+0

La riga 8 ha un errore, se lo aggiusti, la pagina viene visualizzata correttamente. –

+0

interessante ... lo aggiusto .. ma con l'adattatore offline non funziona. Solo nel cloud ... –

risposta

14

Mi sono imbattuto in un problema simile e forse quello che ho imparato potrebbe aiutarti. Si tratta delle differenze nel modo in cui l'angolare e il jQuery passano da una pagina/sezione all'altra (instradamento).

In primo luogo, le basi: percorsi angolari inserendo un chunk di html nella vista, quindi su qualsiasi clic/azione/etc, rimuovendo tale html dalla vista e aggiungendo un nuovo blocco di html. Essenzialmente sei sulla stessa pagina per tutto il tempo; è solo l'html incluso sta cambiando. Al contrario, pensa a jqm come a caricare tutto l'html nella stessa pagina, con quei blocchi html come div. Invece di rimuovere i blocchi html e di sostituirli (tramite il routing), è sufficiente attivare e disattivare i div. (Esistono app jqm multi pagina ma le SPA evidenziano davvero le differenze.)

Il mio suggerimento è di scegliere quale set di funzionalità si desidera veramente: il caricamento minimalistico di angular (solo se necessario) o le transizioni appariscenti di jqm e altro funzionalità integrate. Se hai un'enorme app con molti dati su ogni pagina, potresti voler bypassare jqm e usare solo angolare, e vedere cosa puoi fare con le nuove funzioni animate di angular. Significa che dovrai compilare (tramite CSS o javascript) i duplicati delle funzionalità di jqm e da quello che ho visto, puoi avvicinarti ma non sarà altrettanto piacevole come jqm.

Se le funzionalità integrate di jqm sono ciò che si desidera realmente, ignorare l'instradamento angolare. In ogni caso, introdurrà tutti i tipi di complicazioni. Configura le tue pagine usando lo schema di jqm e usa l'angolare solo quando hai a che fare con i dati.

Quello che ho trovato funziona meglio è trattarlo come se fosse un'app jqm in generale, e aggiungere solo angolare nelle sezioni in cui ne hai bisogno. Dopo tutto, non devi aggiungere ng-app sulla linea html; puoi aggiungerlo in un singolo div secondo necessità. Dal momento che jqm è più felice come un tipo di cosa a livello di sistema, mentre l'angolare va benissimo essere limitato a pezzi all'interno di un sistema, finora ho trovato jqm-whole e angular-parts per essere il modo più semplice per ottenere il meglio da entrambi mondi.

+0

Ciao kl02, risposta molto bella e dettagliata. Sto per iniziare un nuovo progetto usando le librerie citate, e farò il modo in cui l'hai suggerito, immagino che funzionerà. Nel frattempo, hai qualche campione dal vivo o un piccolo progetto per mostrare l'inizio? –

+0

Spiacente, non l'ho ancora messo online. Cercherò di fare un piccolo plunkr questo fine settimana per dimostrare. – kl02