Qual è la differenza tra angular-route e angular-ui-router?


1080

Sto pianificando di utilizzare AngularJS nelle mie grandi applicazioni. Quindi sono in procinto di scoprire i moduli giusti da usare.

Qual è la differenza tra i moduli ngRoute (angular-route.js) e ui-router (angular-ui-router.js) ?

In molti articoli quando si utilizza ngRoute , route è configurata con $ routeProvider . Tuttavia, quando utilizzato con ui-router , route è configurato con $ stateProvider e $ urlRouterProvider .

Quale modulo dovrei usare per una migliore gestibilità ed estensibilità?


11
per non parlare del nuovo router di angular in 1.4+ e 2.0
Zach Lysobey,

Risposte:


1112

ui-router è un modulo di terze parti ed è molto potente. Supporta tutto ciò che può fare il normale ngRoute e molte funzioni extra.

Ecco alcuni motivi comuni per cui ui-router è stato scelto su ngRoute:

  • ui-router consente visualizzazioni nidificate e più viste con nome . Questo è molto utile con app più grandi in cui potresti avere pagine ereditate da altre sezioni.

  • ui-router ti consente di avere collegamenti di tipo forte tra stati basati su nomi di stato. Cambiare l'URL in un posto aggiornerà ogni collegamento a quello stato quando si creano i collegamenti ui-sref. Molto utile per progetti più grandi in cui gli URL potrebbero cambiare.

  • Esiste anche il concetto di decoratore che potrebbe essere utilizzato per consentire la creazione dinamica dei percorsi in base all'URL che sta tentando di accedere. Ciò potrebbe significare che non dovrai prima specificare tutti i tuoi percorsi.

  • stati ti consentono di mappare e accedere a informazioni diverse su stati diversi e puoi facilmente passare informazioni tra stati attraverso $stateParams.

  • Puoi facilmente determinare se sei in uno stato o genitore di uno stato per regolare l'elemento dell'interfaccia utente (evidenziando la navigazione dello stato corrente) all'interno dei tuoi modelli tramite l'i $state-router che puoi esporre impostandolo $rootScopesu run.

In sostanza, ui-router è ngRouter con più funzionalità, sotto le lenzuola è abbastanza diverso. Queste funzionalità aggiuntive sono molto utili per applicazioni più grandi.

Maggiori informazioni:


134
Nel complesso questa è la migliore spiegazione, ma per un punto chiave: "Nel complesso, ui-router è ngRouter con più funzionalità". È molto più fondamentale di così: ngRouteti consente semplicemente di assegnare controller e template alle rotte URL, mentre l'astrazione fondamentale in ui.routersono stati, che è un concetto più potente.
Nate Abele,

23
Potrebbe essere rilevante per alcuni sottolineare la differenza nella dimensione dei file in questa risposta. A partire da ora ngRoute: 35,9 kB / 4,4 kB / 2,5 kB e ui-router: 162,9 kB / 30,4 kB / 11,6 kB (non minificati / minimizzati / compressi).
Alex Ross,

35
Siamo seriamente preoccupati per 162kb nel 2015?
Pesce gatto

27
Perché non @Catfish? Ci sono molti posti al mondo con cattive connessioni a Internet, preoccuparsi è molto importante!
Bruno Casali,

4
@tfrascaroli Non sono d'accordo - se un utente sta caricando la tua app per la prima volta, i tempi di caricamento della pagina sono fortemente correlati alle frequenze di rimbalzo . Considererei sicuramente il costo / beneficio prima di aggiungere altri 130kB alla pagina.
Anthony Manning-Franklin,

131

ngRoute è un modulo sviluppato dal team di AngularJS che faceva parte del nucleo di AngularJS.

ui-router è un framework creato al di fuori del progetto AngularJS per migliorare e migliorare le funzionalità di routing.

Dal ui-router documentazione :

AngularUI Router è un framework di routing per AngularJS, che consente di organizzare le parti dell'interfaccia in una macchina a stati. A differenza del servizio $ route in Angular core, che è organizzato attorno alle rotte URL, UI-Router è organizzato attorno agli stati, che possono facoltativamente avere rotte, così come altri comportamenti, collegati.

Gli stati sono associati a viste denominate, nidificate e parallele, consentendo di gestire in modo efficace l'interfaccia dell'applicazione.

Nessuno dei due è migliore, dovrai scegliere il più appropriato per il tuo progetto.

Tuttavia, se prevedi di avere viste complesse nella tua applicazione e desideri occuparti dell'idea "$ state". Ti consiglio di scegliere l'interfaccia utente.


1
FWIW Ho appena trascorso alcune ore a sbattere la testa contro l'Ui-router per angularjs. La documentazione è in uno stato MOLTO spiacevole, è chiaramente stata abbandonata per anni ormai. Collegamenti interrotti a guide importanti, pacchetti nuget errati nel tutorial, lo chiami. Alla fine ho rinunciato dopo che non sono riuscito a capire questo problema stackoverflow.com/questions/23585065/… (insieme a apparentemente molte altre persone). Prova ngRoute ora ...
UnionP



35

Se si desidera utilizzare la funzionalità di viste nidificate implementata all'interno del paradigma di ngRoute, provare il segmento angolare-route- mira a estendere ngRoute anziché sostituirlo.


16
Non vedo la pertinenza della tua risposta. L'autore ha chiesto in particolare le differenze tra angular-route e angular-ui-router. Inoltre, un disclaimer che sei il creatore sarebbe utile quando promuovi le tue librerie.
Vally,

23
La rilevanza è semplice: angular-route + angular-route-segment = angular-ui-router. Quindi, la differenza è: angular-ui-router - angular-route =
angular

1
penso che sia una risposta valida. angular-route-segment.com è sicuramente una buona scelta per coloro che non vogliono avere il sovraccarico di usare ui-router. Anche @vially, le persone lavorano duramente per creare queste librerie, non è una brutta cosa promuoverle
phil

19

Generalmente ui-router funziona su un meccanismo a stati ... Può essere compreso con un semplice esempio:

Diciamo che abbiamo una grande applicazione di una libreria musicale (come ..gaana o saavan o qualsiasi altra). E nella parte inferiore della pagina, hai un lettore musicale che è condiviso in tutto lo stato della pagina.

Ora diciamo che basta fare clic su alcuni brani da riprodurre. In questo caso, dovrebbe cambiare solo lo stato del lettore musicale invece di ricaricare l'intera pagina. Questo può essere facilmente gestito da ui-router.

Mentre in ngRoute alleghiamo solo la vista e il controller.


2
questo potrebbe essere fatto e deve essere fatto usando servizi e fabbriche. L'uso di questo pacchetto è la mancanza di comprensione di percorsi, stati e schemi angolari. Gli stati sono gestiti dall'URL, che è corretto se si desidera condividere l'app in uno stato specifico, inoltre è possibile avere più controller nella stessa vista che reagiscono all'aggiornamento dei dati di servizio o al parametro url. il router rovina tutto e distrugge completamente il modello angolare.
Pablo Ezequiel Leone,

Sono completamente d'accordo. Non riesco ancora a trovare una spiegazione in cui è necessario utilizzare questa macchina a stati
kushalvm,

18

1.x angolare

ng-route :

ng-route è sviluppato dal team angularJS per il routing.

ng-route: routing basato su url (posizione).

Ex:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

UI-route :

ui-router è sviluppato da un modulo di terze parti.

ui-router: routing basato sullo stato

Ex:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> ui-router consente visualizzazioni nidificate

-> ui-router più potente di ng-route

ng-router , ui-router


13

ngRoute è un modulo creato dal team Angular che fornisce funzionalità di routing lato client di base. Questo modulo fornisce una base abbastanza potente per il routing e può essere costruito abbastanza facilmente per fornire solide funzionalità di routing, come esemplificato in questo post sul blog (assicurati di leggere il commento tra Ward Bell e Ben Nadel, l'autore - sono un coppia di professionisti angolari)

ui-router sposta l'attenzione da percorsi url-centrici a "stati" dell'applicazione, che possono o meno essere riflessi nell'URL.

Le funzionalità principali aggiunte da ui-router sono stati nidificati e viste con nome.

Gli stati nidificati consentono di separare la logica del controller per le varie parti dell'applicazione. Un esempio molto semplice di questo sarebbe un'app con la navigazione principale in alto, un elenco di navigazione secondario a sinistra e il contenuto a destra. Senza stati nidificati, un singolo controller dovrebbe in genere gestire la logica di visualizzazione per la navigazione secondaria e il contenuto. Il routing nidificato consente di separare queste preoccupazioni.

Le viste con nome sono un'altra caratteristica aggiuntiva di ui-router. Con ngRoute, puoi avere una sola direttiva ngView su una pagina, mentre con le viste con nome in ui-router puoi specificare più direttive ui-view, e quindi ogni stato è in grado di influenzare il modello e il controller delle viste dei nomi. Un esempio semplicissimo di questo sarebbe avere il contenuto principale della tua app come vista principale e quindi avere anche una barra a piè di pagina che sarebbe una UI-view separata. In questo scenario, il controller del piè di pagina non deve più ascoltare i cambiamenti di stato / rotta.

Un buon confronto tra ngRoute e ui-router è disponibile su questo episodio di podcast .

Solo per rendere le cose più confuse, tieni d'occhio il nuovo modulo di routing "ufficiale" che il team di Angular si aspetta di rilasciare per le versioni 1.5 e 2.0 di Angular. Questo sostituirà il modulo ngRoute. Ecco la documentazione corrente per il nuovo modulo del router - è piuttosto scarsa al momento della pubblicazione poiché l'implementazione non è stata ancora finalizzata. Guarda qui per ulteriori notizie su quando questo modulo verrà effettivamente rilasciato.


11

ngRoute è una libreria di routing di base, in cui è possibile specificare solo una vista e un controller per qualsiasi percorso.

Con ui-router, puoi specificare più viste, sia parallele che nidificate. Quindi, se la tua applicazione richiede (o potrebbe richiedere in futuro) qualsiasi tipo di routing / vista complessi, procedi con ui-router.

Questa è la guida introduttiva migliore per AngularUI Router.


10

Cosa di base che devi sapere: usi di ng-router $location.path()e usi di ui-router$state.go

Riposaci tutte le funzionalità.


8

il tuo router ti semplifica la vita! Puoi aggiungerlo alla tua applicazione AngularJS iniettandolo nelle tue applicazioni ...

ng-route viene fornito come parte del core AngularJS, quindi è più semplice e offre meno opzioni ...

Guarda qui per capire meglio ng-route: https://docs.angularjs.org/api/ngRoute

Inoltre, quando lo usi, non dimenticare di usare: ngView ..

ng-ui-router è diverso ma:

https://github.com/angular-ui/ui-router ma ti offre più opzioni ....


6

AngularUI Router è un framework di routing per AngularJS, che consente di organizzare le parti dell'interfaccia in una macchina a stati. A differenza del servizio $ route nel modulo Angular ngRoute, che è organizzato attorno alle rotte URL, UI-Router è organizzato intorno agli stati, che possono facoltativamente avere rotte, così come altri comportamenti, collegati.

https://github.com/angular-ui/ui-router


4

ngRoute è un modulo sviluppato dal team Angular.js che faceva parte del nucleo angolare.

ui-router è un framework creato al di fuori del progetto Angular.js per migliorare e migliorare le capacità di routing.


3

1- ngRoute è sviluppato da un team angolare mentre ui-router è un modulo di terze parti. 2- ngRoute implementa il routing in base all'URL del routing mentre ui-router implementa il routing in base allo stato dell'applicazione. 3- ui-router fornisce tutto ciò che offre ng-route oltre ad alcune funzionalità aggiuntive come stati nidificati e viste con più nomi.


0

ng-View(sviluppato dal team AngularJS) può essere utilizzato una sola volta per pagina, mentre ui-View(modulo di terze parti) può essere utilizzato più volte per pagina.

ui-View è quindi l'opzione migliore.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.