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

Por favor, explique a diferença entre $routeProvider e $stateProvider no AngularJS.

Qual é a melhor prática?

Ambos fazem o mesmo trabalho que são usados ​​para fins de roteamento no SPA (Single Page Application).

1. Roteamento Angular – por $ routeProvider docs

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

HTML

 

A tag acima renderizará o modelo da $routeProvider.when() que você mencionou no .config (fase de configuração) do angular

Limitações: –

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

2. roteador-ui – 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 ter opcionalmente rotas, bem como outro comportamento, anexado.

Visualizações múltiplas e nomeadas

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

Embora várias visualizações paralelas sejam um recurso poderoso, muitas vezes você poderá gerenciar suas interfaces de maneira mais eficaz aninhando suas view e pareando essas visualizações com estados nesteds.

HTML

 

A maior parte do poder do ui-router é que ele pode gerenciar estados e visualizações aninhadas.

Prós

  • Você pode ter várias ui-view em uma única página
  • Várias visualizações podem ser aninhadas umas nas outras e mantidas definindo o estado na fase de roteamento.
  • Podemos ter um relacionamento filho e pai aqui, simplesmente como inheritance no estado, e você também pode definir estados de irmãos.
  • Você pode alterar o ui-view="some" do estado usando apenas o roteamento absoluto usando @ com o nome do estado.
  • Outra maneira de fazer o roteamento relativo é usando apenas @ para alterar ui-view="some" . Isso replaceá a ui-view vez de verificar se ela está aninhada ou não.
  • Aqui você poderia usar o ui-sref para criar uma URL href dinamicamente com base na URL mencionada em um estado, e também poderia fornecer um estado params no formato json .

Para mais informações Angular ui-roteador

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

O próprio ng-Router do Angular leva os URLs em consideração durante o roteamento, o UI-Router toma states além dos URLs.

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

Enquanto no ng-roteador, você tem que ter muito cuidado com as URLs ao fornecer links através da tag , no roteador de interface do usuário você deve manter apenas o state em mente. Você fornece links como . Observe que, mesmo que você use no roteador de interface do usuário, assim como faria no ng-router, ele ainda funcionará.

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

Enquanto o ngRouter pode ser usado para fazer aplicativos simples, o UI-Router torna o desenvolvimento muito mais fácil para aplicativos complexos. Aqui está o seu wiki.