Qual é a diferença entre o roteador angular e o roteador angular?

Estou planejando usar o AngularJS em meus grandes aplicativos. Então, estou no processo para descobrir os módulos certos a serem usados.

Qual é a diferença entre os módulos ngRoute (angular-route.js) e ui-router (angular-ui-router.js) ?

Em muitos artigos quando o ngRoute é usado, a rota é configurada com $ routeProvider . No entanto, quando usado com o roteador-ui , a rota é configurada com $ stateProvider e $ urlRouterProvider .

Qual módulo devo usar para melhor capacidade de gerenciamento e extensibilidade?

O ui-router é um módulo de terceiros e é muito poderoso. Ele suporta tudo o que o ngRoute normal pode fazer, bem como muitas funções extras.

Aqui estão algumas razões comuns para o ui-router ser escolhido em ngRoute:

  • O ui-router permite visões aninhadas e múltiplas visualizações nomeadas . Isso é muito útil em aplicativos maiores, onde você pode ter páginas herdadas de outras seções.

  • O ui-router permite que você tenha links de tipo forte entre estados com base nos nomes de estados. Mudar o URL em um lugar atualizará cada link para esse estado quando você construir seus links com o ui-sref . Muito útil para projetos maiores em que os URLs podem mudar.

  • Há também o conceito do decorador que pode ser usado para permitir que suas rotas sejam criadas dinamicamente com base no URL que está tentando ser acessado. Isso pode significar que você não precisará especificar todas as suas rotas antes da mão.

  • Os estados permitem que você mapeie e acesse informações diferentes sobre estados diferentes e pode facilmente passar informações entre estados via $stateParams .

  • Você pode facilmente determinar se você está em um estado ou pai de um estado para ajustar o elemento da interface do usuário (destacando a navegação do estado atual) dentro de seus modelos via $state fornecido pelo ui-roteador que você pode expor definindo-o em $rootScope on run .

Em essência, o roteador ui é ngRouter com mais resources, sob as folhas é bastante diferente. Esses resources adicionais são muito úteis para aplicativos maiores.

Mais Informações:

O ngRoute é um módulo desenvolvido pela equipe do AngularJS que anteriormente fazia parte do núcleo do AngularJS.

O ui-router é um framework que foi feito fora do projeto AngularJS para melhorar e melhorar as capacidades de roteamento.

Da documentação do roteador da interface do usuário:

O AngularUI Router é uma estrutura de roteamento para o AngularJS, que permite organizar as partes da sua interface em uma máquina de estado. Ao contrário do serviço $ route no Angular core, que é organizado em torno de rotas de URL, o UI-Router é organizado em torno de estados, que podem ter opcionalmente rotas, bem como outros comportamentos, anexados.

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

Nenhum deles é melhor, você terá que escolher o mais adequado para o seu projeto.

No entanto, se você planeja ter exibições complexas em seu aplicativo e gostaria de lidar com a noção “estado $”. Eu recomendo que você escolha o roteador ui.

ngRoute é um módulo de núcleo angular que é bom para cenários básicos. Eu acredito que eles irão adicionar resources mais poderosos nos próximos lançamentos.

URL: https://docs.angularjs.org/api/ngRoute

O Ui-router é um módulo contribuído que supera os problemas do ngRoute. Vistas principalmente aninhadas / complexas.

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

Alguma da diferença entre o roteador da ui e o ngRoute

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

insira a descrição da imagem aqui

O ngRoute faz parte do framework central AngularJS.

O ui-router é uma biblioteca da comunidade criada para tentar melhorar os resources de roteamento padrão.

Aqui está um bom artigo sobre como configurar / configurar o ui-roteador:

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

Se você quiser usar a funcionalidade de visualizações aninhadas implementadas no paradigma ngRoute, tente o segmento de rota angular – ele tem como objective estender ngRoute em vez de substituí-lo.

Geralmente o ui-roteador funciona em um mecanismo de estado … Ele pode ser entendido com um exemplo fácil:

Digamos que temos uma grande aplicação de uma biblioteca de músicas (como ..gaana ou saavan ou qualquer outra). E na parte inferior da página, você tem um player de música que é compartilhado em todo o estado da página.

Agora vamos dizer que você acabou de clicar em algumas músicas para tocar. Nesse caso, apenas o estado do player de música deve mudar, em vez de recarregar a página inteira. Isso pode ser facilmente manipulado pelo roteador ui.

Enquanto no ngRoute nós apenas anexamos a view e o controller.

Angular 1.x

ng-route :

ng-route é desenvolvido pela equipe angularJS para roteamento.

ng-route: roteamento baseado em url (Location).

Ex:

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

rota da ui :

O ui-router é desenvolvido pelo módulo de terceiros.

roteador ui: roteamento baseado em estado

Ex:

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

-> ui-roteador permite vistas aninhadas

-> ui-roteador mais poderoso que ng-route

ng-roteador , ui-roteador

O ngRoute é um módulo construído pela equipe Angular que fornece a funcionalidade básica de roteamento do lado do cliente. Este módulo fornece uma base razoavelmente poderosa para o roteamento, e pode ser construído facilmente para fornecer funcionalidade de roteamento sólida, como exemplificado neste post (não deixe de ler a trilha de comentários entre Ward Bell e Ben Nadel, o autor – eles são um casal de profissionais Angular)

O ui-router desloca o foco das rotas cinputs na url para os “estados” da aplicação, que podem ou não ser refletidos na URL.

Os principais resources adicionados pelo ui-router são os estados nesteds e as visualizações nomeadas.

Os estados nesteds permitem separar a lógica do controlador para as várias partes do aplicativo. Um exemplo muito simples disso seria um aplicativo com navegação principal na parte superior, uma lista de navegação secundária à esquerda e conteúdo à direita. Sem estados nesteds, um único controlador normalmente teria que manipular a lógica de exibição para a navegação secundária, bem como o conteúdo. O roteamento nested permite separar essas preocupações.

Vistas nomeadas são outra característica adicional do roteador ui. Com o ngRoute, você só pode ter uma única diretiva ngView em uma página, enquanto que com as exibições nomeadas no ui-roteador você pode especificar várias diretivas de visualização de ui e cada estado é capaz de afetar o modelo e o controlador das exibições de nomes. Um exemplo super simples disso seria ter o conteúdo principal do seu aplicativo como a visualização principal e, depois, também ter uma barra de rodapé que seria uma visualização de ui separada. Nesse cenário, o controlador de rodapé não precisa mais receber alterações de estado / rota.

Uma boa comparação de ngRoute e ui-router pode ser encontrada neste episódio de podcast .

Apenas para tornar as coisas mais confusas, fique de olho no novo módulo de roteamento “oficial” que a equipe Angular está esperando lançar para as versões 1.5 e 2.0 do Angular. Isso replaceá o módulo ngRoute. Aqui está a documentação atual para o novo módulo do Roteador – é bastante escasso a partir desta postagem, já que a implementação ainda não foi finalizada. Assista aqui para mais novidades sobre quando este módulo será realmente lançado.

ngRoute é uma biblioteca básica de roteamento, onde você pode especificar apenas uma visão e um controlador para qualquer rota.

Com o roteador-ui, você pode especificar várias visualizações, paralelas e aninhadas. Portanto, se seu aplicativo exigir (ou exigir no futuro) qualquer tipo de roteamento / visualizações complexas, vá em frente com o ui-router.

Este é o melhor guia para o AngularUI Router.

Coisa básica que você precisa saber: ng-router usa $location.path() e o ui-roteador usa $state.go

rest todos os resources.

roteador ui facilite sua vida! Você pode adicioná-lo ao aplicativo AngularJS por meio de injetá-lo em seus aplicativos …

ng-route vem como parte do núcleo do AngularJS, então é mais simples e oferece menos opções …

Olhe aqui para entender melhor a rota ng: https://docs.angularjs.org/api/ngRoute

Além disso, ao usá-lo, não se esqueça de usar: ngView ..

O ng-ui-router é diferente, mas:

https://github.com/angular-ui/ui-router mas oferece mais opções ….

O AngularUI Router é uma estrutura de roteamento para o AngularJS, que permite organizar as partes da sua interface em uma máquina de estado. Ao contrário do serviço $ route no módulo ngRoute Angular, que é organizado em torno de rotas de URL, o Roteador de UI é organizado em torno de estados, que podem ter opcionalmente rotas, bem como outros comportamentos, anexados.

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

O ngRoute é um módulo desenvolvido pela equipe do Angular.js, que fazia parte do núcleo Angular.

O ui-router é um framework que foi feito fora do projeto Angular.js para melhorar e melhorar as possibilidades de roteamento.

1- ngRoute é desenvolvido pela equipe angular, enquanto o ui-router é um módulo de terceiros. 2 – ngRoute implementa o roteamento baseado no roteador URL, enquanto o ui-roteador implementa o roteamento baseado no estado do aplicativo. O roteador 3-ui fornece tudo o que o ng-route fornece, além de alguns resources adicionais, como estados nesteds e várias visualizações nomeadas.

ng-View (desenvolvido pela equipe do AngularJS) pode ser usado apenas uma vez por página, enquanto o ui-View (módulo de terceiros) pode ser usado várias vezes por página.

ui-View é, portanto, a melhor opção.