Qual è la differenza tra rotta angular e router angular?

Sto pensando di utilizzare AngularJS nelle mie grandi applicazioni. Quindi sono in procinto di trovare 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 viene utilizzato ngRoute , il percorso è configurato con $ routeProvider . Tuttavia, se 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 il normale ngRoute può fare e molte funzioni extra.

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

  • ui-router consente viste nidificate e più viste con nome . Questo è molto utile con un’app di dimensioni maggiori in cui potresti avere pagine che ereditano da altre sezioni.

  • ui-router ti permette di avere collegamenti di tipo forte tra stati basati su nomi di stati. Cambiare l’url in un posto aggiornerà ogni link a quello stato quando costruisci i tuoi collegamenti con ui-sref . Molto utile per progetti di grandi dimensioni in cui gli URL potrebbero cambiare.

  • Esiste anche il concetto di decoratore che può essere utilizzato per consentire la creazione dynamic dei percorsi in base all’URL che si sta tentando di accedere. Ciò potrebbe significare che non dovrai specificare tutte le tue rotte in anticipo.

  • Gli stati ti consentono di mappare e accedere a informazioni diverse sui diversi stati e puoi facilmente passare informazioni tra stati tramite $stateParams .

  • Puoi facilmente determinare se ti trovi in ​​uno stato o un genitore di uno stato per regolare l’elemento dell’interfaccia utente (evidenziando la navigazione dello stato corrente) all’interno dei tuoi modelli tramite $state fornito da ui-router che puoi esporre impostandolo in $rootScope su run .

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

Maggiori informazioni:

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

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

Dalla documentazione del router uu :

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 nucleo angular, che è organizzato attorno alle rotte URL, l’UI-Router è organizzato attorno agli stati, che possono eventualmente avere percorsi, così come altri comportamenti, allegati.

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 si intende avere viste complesse nella propria applicazione e si desidera gestire la nozione “$ state”. Ti consiglio di scegliere ui-router.

ngRoute è un modulo angular di base che è utile 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 fornito che supera i problemi di ngRoute. Viste principalmente nidificate / complesse.

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

Qualche differenza tra ui-router e ngRoute

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

inserisci la descrizione dell'immagine qui

ngRoute è parte del core framework AngularJS.

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

Ecco un buon articolo su come configurare / configurare ui-router:

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

Se si desidera utilizzare la funzionalità di viste nidificate implementata nel paradigma ngRoute, provare il segmento del segmento angular, che mira ad estendere ngRoute piuttosto che a sostituirlo.

Generalmente l’ui-router funziona su un meccanismo di stato … 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 in fondo alla pagina, hai un lettore musicale che è condiviso su tutto lo stato della pagina.

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

Mentre in ngRoute colleghiamo solo la vista e il controller.

Angolare 1.x

ng-route :

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

ng-route: percorso basato su url (Location).

Ex:

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

percorso ui :

ui-router è develoepd dal modulo di terze parti.

ui-router: instradamento basato sullo stato

Ex:

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

-> ui-router consente viste nidificate

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

ng-router , ui-router

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

ui-router sposta l’attenzione dalle rotte url-centric agli “stati” dell’applicazione, che possono o non possono essere riflessi nell’URL.

Le funzionalità principali aggiunte dall’u-router sono stati nidificati e viste con nome.

Gli stati nidificati consentono di separare la logica del controller per i vari pezzi dell’applicazione. Un esempio molto semplice di questo sarebbe un’app con navigazione primaria in alto, una lista di navigazione secondaria a sinistra e il contenuto a destra. Senza stati nidificati, un singolo controller normalmente deve gestire la logica di visualizzazione per la navigazione secondaria e il contenuto. Il routing nidificato consente di separare questi dubbi.

Le viste con nome sono un’altra funzionalità aggiuntiva di ui-router. Con ngRoute, è ansible avere solo una singola direttiva ngView su una pagina, mentre con le viste denominate in ui-router è ansible specificare più direttive per la visione ui, e quindi ogni stato è in grado di influenzare il modello e il controllore delle viste dei nomi. Un esempio semplicissimo di questo sarebbe quello di avere il contenuto principale della tua app come vista principale, e poi di avere anche una barra di fondo che sarebbe un ui-view separato. In questo scenario, il controllore del piè di pagina non deve più ascoltare le modifiche di stato / percorso.

Un buon confronto tra ngRoute e ui-router può essere trovato su questo episodio podcast .

Solo per rendere le cose più confuse, tieni d’occhio il nuovo modulo di routing “ufficiale” che il team di Angular prevede 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 Router – è piuttosto scarso da questo post poiché l’implementazione non è ancora stata finalizzata. Guarda qui per ulteriori notizie su quando questo modulo verrà effettivamente rilasciato.

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

Con ui-router, è ansible specificare più viste, sia parallele che nidificate. Quindi, se l’applicazione richiede (o potrebbe richiedere in futuro) qualsiasi tipo di instradamento / viste complessi, procedere con l’interfaccia utente.

Questa è la guida introduttiva migliore per AngularUI Router.

Cosa fondamentale da sapere: ng-router usa $location.path() e ui-router usa $state.go

Riposaci tutte le funzionalità.

il tuo router ti semplifica la vita! Puoi aggiungerlo all’applicazione AngularJS inserendolo nelle tue applicazioni …

ng-route arriva come parte del nucleo di AngularJS, quindi è più semplice e ti offre un minor numero di opzioni …

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

Inoltre, quando lo si usa, 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 intorno alle rotte URL, UI-Router è organizzato attorno agli stati, che possono eventualmente avere percorsi, così come altri comportamenti, allegati.

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

ngRoute è un modulo sviluppato dal team Angular.js che era precedentemente parte del nucleo angular.

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

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

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

ui-View è quindi l’opzione migliore.