Qual é a diferença entre rota angular e angular-ui-router?

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

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

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

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

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

Aqui estão alguns motivos comuns pelos quais o ui-router é escolhido no ngRoute:

• O ui-router permite visualizações aninhadas e várias visualizações nomeadas . Isso é muito útil em aplicativos maiores, nos quais 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 em nomes de estados. Alterar o URL em um único local atualizará todos os links para esse estado quando você criar seus links ui-sref. Muito útil para projetos maiores em que os URLs podem mudar.

• Há também o conceito de decorador que pode ser usado para permitir que suas rotas sejam criadas dinamicamente com base na URL que está tentando ser acessada. Isso pode significar que você não precisará especificar todas as suas rotas com antecedência.

• Os estados permitem mapear e acessar informações diferentes sobre diferentes estados e você 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 elemento UI (com destaque para a navegação do estado atual) dentro de seus modelos via $statefornecido pelo ui-roteador que você pode expor via defini-lo em $rootScopeon run.

Em essência, o ui-router é o ngRouter com mais recursos, sob as folhas é bem diferente. Esses recursos adicionais são muito úteis para aplicativos maiores.

Mais Informações:

• Github: https://github.com/angular-ui/ui-router
• Documentação:
  • Referência da API: http://angular-ui.github.io/ui-router/site/#/api
  • Guia: https://github.com/angular-ui/ui-router/wiki
• Perguntas frequentes: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Exemplo de aplicativo: http://angular-ui.github.io/ui-router/sample/#/

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

O ui-router é uma estrutura criada fora do projeto AngularJS para melhorar e aprimorar os recursos de roteamento.

Desde o ui-router documentação :

O AngularUI Router é uma estrutura de roteamento para o AngularJS, que permite organizar as partes da sua interface em uma máquina de estado. Diferentemente 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 opcionalmente ter rotas e outros comportamentos anexados.

Os estados estão vinculados a visualizaçõ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 apropriado para o seu projeto.

No entanto, se você planeja ter visualizações complexas em seu aplicativo e gostaria de lidar com a noção "$ state". Eu recomendo que você escolha o ui-router.

O ngRoute é um módulo principal angular, adequado para cenários básicos. Acredito que eles adicionarão recursos 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. Visualizações principalmente aninhadas / complexas.

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

Alguma da diferença entre ui-router e ngRoute

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

O ngRoute faz parte da estrutura principal do AngularJS.

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

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

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

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

Geralmente, o ui-router funciona em um mecanismo de estado ... 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 music player que é compartilhado em todo o estado da página.

Agora, digamos que você apenas clique em algumas músicas para tocar. Nesse caso, apenas o estado do music player deve mudar em vez de recarregar a página inteira. Isso pode ser facilmente manipulado pelo ui-router.

Enquanto no ngRoute, apenas anexamos a visualização e o controlador.

Angular 1.x

rota ng :

ng-route é desenvolvido pela equipe angularJS para roteamento.

ng-route: roteamento baseado em URL (local).

Ex:

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

rota ui :

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

ui-router: roteamento baseado em estado

Ex:

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

-> ui-router permite visualizações aninhadas

-> ui-router mais poderoso que o ng-route

ng-router , ui-router

O ngRoute é um módulo criado pela equipe Angular que fornece funcionalidade básica de roteamento do lado do cliente. Este módulo fornece uma base bastante poderosa para roteamento e pode ser construído com bastante facilidade para fornecer funcionalidade sólida de roteamento, como exemplificado nesta postagem do blog (leia a trilha de comentários entre Ward Bell e Ben Nadel, o autor - eles são um par de profissionais angulares)

O ui-router muda o foco das rotas centradas no URL para os "estados" do aplicativo, que podem ou não ser refletidos no URL.

Os principais recursos adicionados pelo ui-router são estados aninhados e visualizações nomeadas.

Os estados aninhados 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 primária na parte superior, uma lista de navegação secundária à esquerda e conteúdo à direita. Sem estados aninhados, um único controlador normalmente teria que lidar com a lógica de exibição da navegação secundária e do conteúdo. O roteamento aninhado permite separar essas preocupações.

As visualizações nomeadas são outro recurso adicional do ui-router. Com o ngRoute, você pode ter apenas uma única diretiva ngView em uma página, enquanto que nas exibições nomeadas no roteador da interface do usuário, você pode especificar várias diretivas de visualização da interface do usuário, e cada estado pode afetar o modelo e o controlador das exibições de nomes. Um exemplo super simples disso seria fazer com que o conteúdo principal do seu aplicativo fosse a visualização principal e também ter uma barra de rodapé que seria uma visualização da interface do usuário separada. Nesse cenário, o controlador de rodapé não precisa mais ouvir alterações de estado / rota.

Uma boa comparação entre 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 do Angular espera lançar para as versões 1.5 e 2.0 do Angular. Isso substituirá o módulo ngRoute. Aqui está a documentação atual para o novo módulo Roteador - ela é bastante escassa a partir desta publicação, pois a implementação ainda não foi finalizada. Assista aqui para mais notícias sobre quando este módulo será realmente lançado.

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

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

Este é o melhor guia de introdução para o AngularUI Router.

O básico que você precisa saber: usos do ng-router $location.path()e da interface do usuário$state.go

Descanse todos os recursos.

O ui router facilita sua vida! Você pode adicioná-lo ao seu aplicativo AngularJS injetando-o em seus aplicativos ...

ng-route vem como parte do AngularJS principal, por isso é mais simples e oferece menos opções ...

Veja aqui para entender melhor o ng-route: 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. Diferentemente do serviço $ route no módulo Angular ngRoute, organizado em torno de rotas de URL, o UI-Router é organizado em torno de estados, que podem opcionalmente ter rotas e outros comportamentos anexados.

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

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

O ui-router é uma estrutura criada fora do projeto Angular.js para melhorar e aprimorar os recursos de roteamento.

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

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

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