Qual é a diferença entre $ routeProvider e $ stateProvider?

Por favor, explique a diferença entre $routeProvidere $stateProviderno AngularJS.

Qual é a melhor prática?

Ambos fazem o mesmo trabalho que são usados ​​para propósitos de roteamento no SPA (aplicativo de página única).

1. Roteamento angular - por $ routeProvider docs

URLs para controladores e visualizações (parciais HTML). Ele observa $ location.url () e tenta mapear o caminho para uma definição de rota existente.

HTML

<div ng-view></div>

A tag acima renderizará o modelo a partir da $routeProvider.when()condição mencionada em .config(fase de configuração) do angular

Limitações: -

• A página pode conter apenas uma ng-viewpágina
• Se o seu SPA tiver vários componentes pequenos na página que você deseja processar com base em algumas condições, $routeProviderfalhará. (para isso, precisamos usar directivas como ng-include, ng-switch, ng-if, ng-show, o que parece ruim tê-los em SPA)
• Você não pode se relacionar entre duas rotas, como o pai e o filho.
• Você não pode mostrar e ocultar uma parte da exibição com base no padrão de URL.

2. ui-router - por $ stateProvider docs

O AngularUI Router é uma estrutura de roteamento para o AngularJS, que permite organizar as partes da sua interface em uma máquina de estado. O roteador de interface do usuário é organizado em torno de estados, que podem opcionalmente ter rotas e outros comportamentos anexados.

Vistas múltiplas e nomeadas

Outro ótimo recurso é a capacidade de ter várias visualizações de interface do usuário em um modelo.

Embora várias visualizações paralelas sejam um recurso poderoso, muitas vezes você poderá gerenciar suas interfaces com mais eficiência, aninhando seus views e emparelhando essas visualizações com estados aninhados.

HTML

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

A maioria do ui-routerpoder é que ele pode gerenciar estados e visualizações aninhados.

Prós

• Você pode ter vários ui-viewem uma única página
• Várias visualizações podem ser aninhadas umas nas outras e mantidas pela definição do estado na fase de roteamento.
• Podemos ter um relacionamento filho e pai aqui, simplesmente como herança no estado, também é possível definir estados irmãos.
• Você pode alterar o ui-view="some"estado de apenas usando o roteamento absoluto usando @com o nome do estado.
• Outra maneira de fazer o roteamento relativo é usar apenas @para alterar ui-view="some". Isso substituirá o em ui-viewvez de verificar se está aninhado ou não.
• Aqui você pode usar ui-srefpara criar uma hrefURL dinamicamente com base URLno mencionado em um estado, também pode fornecer parâmetros de estado no jsonformato.

Para mais informações: Ui-router angular

Para uma melhor flexibilidade com várias visualizações aninhadas com estados, eu prefiro que você escolha ui-router

O ng-Router da Angular leva URLsem consideração durante o roteamento, o UI-Router statesalém dos URLs.

Os estados são vinculados a visualizações nomeadas, aninhadas e paralelas, permitindo que você gerencie com eficiência a interface do seu aplicativo.

Enquanto estiver no ng-router, você deve ter muito cuidado com os URLs ao fornecer links via <a href="">tag, no UI-Router, você deve ter stateem mente apenas. Você fornece links como <a ui-sref="">. Observe que, mesmo que você use o <a href="">UI-Router, como faria no ng-router, ele ainda funcionará.

Portanto, mesmo que você decida alterar seu URL algum dia, stateele permanecerá o mesmo e você precisará alterar o URL apenas em .config.

Enquanto o ngRouter pode ser usado para criar aplicativos simples, o UI-Router facilita muito o desenvolvimento de aplicativos complexos. Aqui está o seu wiki.

$ route: é usado para URLs de links diretos para controladores e visualizações (parciais HTML) e observa $ location.url () para mapear o caminho a partir de uma definição existente de rota.

Quando usamos ngRoute, a rota é configurada com $ routeProvider e, quando usamos o ui-router, a rota é configurada com $ 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'
        });