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


1080

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?


11
para não falar do angular novo roteador em 1.4+ e 2.0
Zach Lysobey

Respostas:


1112

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:


134
No geral, esta é a melhor explicação, mas por um ponto-chave: "No geral, o ui-router é o ngRouter com mais recursos". É muito mais fundamental que isso: ngRouteapenas permite atribuir controladores e modelos a rotas de URL, enquanto a abstração fundamental em ui.routerestados é estados, que é um conceito mais poderoso.
Nate Abele

23
Pode ser relevante para alguns apontar a diferença no tamanho do arquivo nesta resposta. No momento ngRoute: 35,9kB / 4,4kB / 2,5kB e ui-router: 162,9kB / 30,4kB / 11,6kB (não minificado / minificado / compactado com gz).
Alex Ross

35
Estamos seriamente preocupados com 162kb em 2015?
Catfish

27
Por que não @Catfish? Existem muitos lugares no mundo com más conexões à Internet, preocupe-se com isso é muito importante!
Bruno Casali

4
@tfrascaroli Não concordo: se um usuário estiver carregando seu aplicativo pela primeira vez, o tempo de carregamento da página está fortemente relacionado às taxas de rejeição . Definitivamente consideraria o custo / benefício antes de adicionar outros 130kB à página.
Anthony Manning-Franklin

131

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.


1
FWIW: Passei algumas horas batendo minha cabeça no ui-router por angularjs. A documentação está em um estado de coisas MUITO triste, claramente ficou abandonada há anos. Links quebrados para guias importantes, pacotes de nuget com nomes incorretos no tutorial, o nome dele. Eventualmente, desisti depois que não consegui descobrir esse problema stackoverflow.com/questions/23585065/… (junto com aparentemente muitas outras pessoas). Experimentando o ngRoute agora ...
UnionP 23/08



35

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.


16
Não vejo a relevância da sua resposta. O autor perguntou especificamente sobre as diferenças entre rota angular e angular-ui-router. Além disso, um aviso de que você é o criador seria útil ao promover suas próprias bibliotecas.
vially

23
A relevância é simples: rota angular + segmento de rota angular = roteador angular da interface do usuário. Assim, a diferença é: angular-ui-router - angular percurso angular =-rota-segmento :)
artch

1
Eu acho que é uma resposta válida. O angular-route-segment.com é definitivamente uma boa escolha para aqueles que não desejam a sobrecarga do uso de roteador de interface do usuário. Também @vially, as pessoas trabalham duro para criar estas bibliotecas, não é uma coisa ruim para promovê-lo
phil

19

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.


2
isso pode ser feito e deve ser feito usando serviços e fábricas. O uso deste pacote é a falta de entendimento de rotas, estados e padrões angulares. Os estados são tratados pelo URL, o que é correto se você deseja compartilhar o aplicativo em um estado específico. Além disso, você pode ter vários controladores na mesma exibição que reagem a uma atualização de dados de serviço ou a um parâmetro de URL. O roteador da interface do usuário atrapalha as coisas e destrói completamente o padrão angular.
Pablo Ezequiel Leone

Eu concordo completamente. Ainda não consegue encontrar uma explicação onde é necessário para usar esta máquina de estado
kushalvm

18

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


13

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.


11

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.


10

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.


8

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 ....


6

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


4

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.


3

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.


0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.