¿Cuál es la diferencia entre $ routeProvider y $ stateProvider?

Por favor explique la diferencia entre $routeProvidery $stateProvideren AngularJS.

¿Cuál es la mejor práctica?

Ambos realizan el mismo trabajo que los utilizados para fines de enrutamiento en SPA (Aplicación de página única).

1. Enrutamiento angular - por $ routeDocumentos del proveedor

URL a controladores y vistas (parciales HTML). Observa $ location.url () e intenta asignar la ruta a una definición de ruta existente.

HTML

<div ng-view></div>

La etiqueta anterior representará la plantilla a partir de la $routeProvider.when()condición que había mencionado en .config(fase de configuración) de angular

Limitaciones: -

• La página solo puede contener un solo ng-viewen la página
• Si su SPA tiene varios componentes pequeños en la página que desea representar en función de algunas condiciones, $routeProviderfalla. (para lograr eso, tenemos que utilizar directivas como ng-include, ng-switch, ng-if, ng-show, que se ve mal tenerlos en SPA)
• No puede relacionarse entre dos rutas como la relación principal y secundaria.
• No puede mostrar y ocultar una parte de la vista según el patrón de URL.

2. ui-router - por $ stateProvider docs

AngularUI Router es un marco de enrutamiento para AngularJS, que le permite organizar las partes de su interfaz en una máquina de estado. UI-Router está organizado alrededor de estados, que opcionalmente pueden tener rutas, así como otros comportamientos, adjuntos.

Vistas múltiples y con nombre

Otra gran característica es la capacidad de tener múltiples vistas ui en una plantilla.

Si bien las vistas paralelas múltiples son una característica poderosa, a menudo podrá administrar sus interfaces de manera más efectiva anidando sus viewcorreos electrónicos y emparejando esas vistas con estados anidados.

HTML

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

La mayor parte del ui-routerpoder es que puede administrar estados anidados y vistas.

Pros

• Puedes tener múltiples ui-viewen una sola página
• Se pueden anidar varias vistas entre sí y mantenerlas definiendo el estado en la fase de enrutamiento.
• Aquí podemos tener una relación entre padres e hijos, simplemente como herencia en estado, también podría definir estados hermanos.
• Puede cambiar el ui-view="some"estado solo con el enrutamiento absoluto @con el nombre del estado.
• Otra forma de hacer un enrutamiento relativo es usar solo @para cambiar ui-view="some". Esto reemplazará el en ui-viewlugar de verificar si está anidado o no.
• Aquí puede usar ui-srefpara crear una hrefURL dinámicamente sobre la base de lo URLmencionado en un estado, también puede dar parámetros de estado en el jsonformato.

Para más información Angular ui-router

Para una mejor flexibilidad con varias vistas anidadas con estados, prefiero que elijas ui-router

El propio ng-Router de Angular toma URLsen consideración durante el enrutamiento, UI-Router toma statesademás de las URL.

Los estados están vinculados a vistas con nombre, anidadas y paralelas, lo que le permite administrar poderosamente la interfaz de su aplicación.

Mientras que en ng-router, debe tener mucho cuidado con las URL al proporcionar enlaces a través de la <a href="">etiqueta, en UI-Router solo debe tener stateen cuenta. Usted proporciona enlaces como <a ui-sref="">. Tenga en cuenta que incluso si lo usa <a href="">en UI-Router, tal como lo haría en ng-router, seguirá funcionando.

Por lo tanto, incluso si decide cambiar su URL algún día, stateseguirá siendo la misma y deberá cambiar la URL solo en .config.

Si bien ngRouter se puede usar para crear aplicaciones simples, UI-Router hace que el desarrollo sea mucho más fácil para aplicaciones complejas. Aquí es wiki.

$ route: se utiliza para vincular URLs a controladores y vistas (parciales HTML) y vigila $ location.url () para mapear la ruta desde una definición existente de ruta.

Cuando usamos ngRoute, la ruta se configura con $ routeProvider y cuando usamos ui-router, la ruta se configura con $ stateProvider y $ 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'
        });