Roteamento AngularJS
O ngRoutemódulo ajuda seu aplicativo a se tornar um aplicativo de página única.
O que é roteamento em AngularJS?
Se você deseja navegar para páginas diferentes em seu aplicativo, mas também deseja que o aplicativo seja um SPA (Aplicativo de página única), sem recarregar a página, você pode usar o ngRoutemódulo.
O ngRoutemódulo roteia seu aplicativo para diferentes páginas sem recarregar o aplicativo inteiro.
Exemplo:
Navegue até "red.htm", "green.htm" e "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
O que eu preciso?
Para deixar seus aplicativos prontos para roteamento, você deve incluir o módulo AngularJS Route:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Então você deve adicionar o ngRoutecomo uma dependência no módulo do aplicativo:
var app = angular.module("myApp", ["ngRoute"]);
Agora seu aplicativo tem acesso ao módulo de rota, que fornece o arquivo $routeProvider.
Use o $routeProviderpara configurar diferentes rotas em seu aplicativo:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Onde isso vai?
Sua aplicação precisa de um container para colocar o conteúdo fornecido pelo roteamento.
Este contêiner é a ng-viewdiretiva.
Existem três maneiras diferentes de incluir a ng-viewdiretiva em seu aplicativo:
Exemplo:
<div ng-view></div>
Exemplo:
<ng-view></ng-view>
Exemplo:
<div
class="ng-view"></div>
Os aplicativos podem ter apenas uma ng-viewdiretiva, e este será o espaço reservado para todas as visualizações fornecidas pela rota.
$routeProvider
Com o $routeProvidervocê pode definir qual página exibir quando um usuário clicar em um link.
Exemplo:
Defina um $routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
Defina o $routeProviderusando o configmétodo de sua aplicação. O trabalho registrado no configmétodo será executado quando o aplicativo estiver carregando.
Controladores
Com o $routeProvidervocê também pode definir um controlador para cada "view".
Exemplo:
Adicionar controladores:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
O "london.htm" e o "paris.htm" são arquivos HTML normais, nos quais você pode adicionar expressões AngularJS como faria com qualquer outra seção HTML do seu aplicativo AngularJS.
Os arquivos ficam assim:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Modelo
Nos exemplos anteriores, usamos a templateUrlpropriedade no
$routeProvider.whenmétodo.
Você também pode usar a templatepropriedade, que permite escrever HTML diretamente no valor da propriedade e não fazer referência a uma página.
Exemplo:
Escreva modelos:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
O método de outra forma
Nos exemplos anteriores, usamos o whenmétodo do $routeProvider.
Você também pode usar o otherwisemétodo, que é a rota padrão quando nenhuma das outras obtém uma correspondência.
Exemplo:
Se nem o link "Banana" nem o link "Tomate" foram clicados, informe-os:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});