Qual è la differenza tra $ routeProvider e $ stateProvider?

Spiegare la differenza tra $routeProvidere $stateProviderin AngularJS.

Qual è la migliore pratica?

Entrambi svolgono la stessa funzione di quelli utilizzati per scopi di routing in SPA (Single Page Application).

1. Routing angolare - per $ routeProvider documenti

URL per controller e viste (parziali HTML). Guarda $ location.url () e tenta di mappare il percorso su una definizione di percorso esistente.

HTML

<div ng-view></div>

Il tag sopra renderà il modello dalla $routeProvider.when()condizione che hai menzionato in .config(fase di configurazione) di angolare

Limitazioni: -

• La pagina può contenere solo singoli ng-viewsulla pagina
• Se la tua SPA ha più piccoli componenti sulla pagina che desideri renderizzare in base ad alcune condizioni, $routeProvidernon riesce. (per ottenere questo, abbiamo bisogno di usare le direttive come ng-include, ng-switch, ng-if, ng-show, che sembra male avere loro in SPA)
• Non è possibile stabilire una relazione tra due percorsi come la relazione padre e figlio.
• Non è possibile mostrare e nascondere una parte della vista in base al modello di URL.

2. ui-router - per $ stateProvider docs

AngularUI Router è un framework di routing per AngularJS, che consente di organizzare le parti dell'interfaccia in una macchina a stati. UI-Router è organizzato intorno agli stati, che possono facoltativamente avere percorsi, così come altri comportamenti, collegati.

Visualizzazioni multiple e con nome

Un'altra grande caratteristica è la possibilità di avere più UI-View in un modello.

Mentre più viste parallele sono una funzionalità potente, spesso sarai in grado di gestire le tue interfacce in modo più efficace annidando le tue viewe accoppiando quelle viste con stati nidificati.

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

La maggior parte del ui-routerpotere è che può gestire lo stato e le viste nidificate.

Professionisti

• Puoi averne più ui-viewsu una sola pagina
• Varie viste possono essere nidificate l'una nell'altra e gestite definendo lo stato in fase di routing.
• Qui possiamo avere relazioni figlio / genitore, semplicemente come eredità nello stato, anche tu potresti definire gli stati fratelli.
• È possibile modificare lo ui-view="some"stato semplicemente utilizzando il routing assoluto utilizzando @con il nome dello stato.
• Un altro modo in cui è possibile eseguire il routing relativo è utilizzare solo @per modificare ui-view="some". Ciò sostituirà ui-viewanziché verificare se è nidificato o meno.
• Qui è possibile utilizzare ui-srefper creare un hrefURL in modo dinamico sulla base di URLcitato in uno stato, inoltre è possibile fornire parametri di stato nel jsonformato.

Per ulteriori informazioni Ui-router angolare

Per una migliore flessibilità con varie visioni nidificate con gli stati, preferirei che tu cercassi ui-router

Il ng-Router di Angular prende URLsin considerazione durante il routing, UI-Router prende statesin considerazione gli URL.

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

Mentre in ng-router, devi prestare molta attenzione agli URL quando fornisci collegamenti tramite <a href="">tag, in UI-Router devi solo tenere statea mente. Fornisci link come <a ui-sref="">. Nota che anche se usi <a href="">in UI-Router, proprio come faresti in ng-router, funzionerà comunque.

Quindi, anche se un giorno deciderai di cambiare l'URL, staterimarrai lo stesso e dovrai cambiare l'URL solo a .config.

Mentre ngRouter può essere utilizzato per creare app semplici, UI-Router semplifica notevolmente lo sviluppo di app complesse. Ecco la sua wiki.

$ route: viene utilizzato per il collegamento diretto di URL a controller e viste (parziali HTML) e guarda $ location.url () per mappare il percorso da una definizione esistente di route.

Quando utilizziamo ngRoute, il percorso è configurato con $ routeProvider e quando usiamo ui-router, il percorso è configurato con $ stateProvider e $ urlRouterProvider.

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });