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

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à?

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:

• Github: https://github.com/angular-ui/ui-router
• Documentazione:
  • Riferimento API: http://angular-ui.github.io/ui-router/site/#/api
  • Guida: https://github.com/angular-ui/ui-router/wiki
• Domande frequenti: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Applicazione di esempio: http://angular-ui.github.io/ui-router/sample/#/

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.

ngRoute è un modulo di base angolare che è buono per gli scenari di base. Credo che aggiungeranno funzionalità più potenti nelle prossime versioni.

URL: https://docs.angularjs.org/api/ngRoute

Ui-router è un modulo che ha superato i problemi di ngRoute. Viste principalmente nidificate / complesse.

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

Alcune delle differenze tra ui-router e ngRoute

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

ngRoute fa parte del framework AngularJS di base.

ui-router è una libreria di comunità creata per tentare di migliorare le funzionalità di routing predefinite.

Ecco un buon articolo sulla configurazione / impostazione di ui-router:

http://www.ng-newsletter.com/posts/angular-ui-router.html

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.

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.

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

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.

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.

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

Riposaci tutte le funzionalità.

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 ....

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

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.

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.

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.