Rotas AngularJS
- Página Anterior Animação AngularJS
- Próxima Página Aplicações AngularJS
ngRoute O módulo ajuda seu aplicativo a se tornar um aplicativo de página única.
O que é roteamento no AngularJS?
Se você quiser navegar para diferentes páginas do aplicativo, mas também deseja que o aplicativo seja um SPA (aplicativo de página única) e não haja recarga de página, você pode usar ngRoute Módulo.
ngRoute O módulo rota seu aplicativo para diferentes páginas sem recarregar todo o aplicativo.
Exemplo
Navegue para "red.htm", "green.htm" e "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">página inicial</a></p>
<a href="#!red">vermelho</a>
<a href="#!green">verde</a>
<a href="#!blue">azul</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 preparar seu aplicativo para roteamento, você deve incluir o módulo AngularJS Route:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Então, você deve ngRoute Adicionar como dependência do módulo do aplicativo:
var app = angular.module("myApp", ["ngRoute"]);
Agora seu aplicativo pode acessar as rotas fornecidas $routeProvider módulo de roteamento.
Use $routeProvider Configurar diferentes rotas no 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 está?
Seu aplicativo precisa de um contêiner para colocar o conteúdo fornecido pelo roteamento.
Este contêiner é ng-view
Pode ser incluída em três maneiras diferentes no aplicativo. ng-view Instrução:
Exemplo
<div ng-view></div>
Exemplo
<ng-view></ng-view>
Exemplo
<div class="ng-view"></div>
O aplicativo pode ter apenas um ng-view instituição, que será o marcador para todas as visões fornecidas pelo roteamento.
$routeProvider
Usar $routeProvider，você pode definir a página a ser exibida quando o usuário clicar no link.
Exemplo
definir $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"
});
});
usando o aplicativo config definição de métodos $routeProvider。Será executado no momento de carregamento do aplicativo config trabalho registrado em métodos.
controladores
Usar $routeProvider，você também pode definir um controlador para cada "visão".
Exemplo
Adicionar controlador:
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 = "Eu amo Londres";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "Eu amo Paris";
});
"london.htm" e "paris.htm" são arquivos HTML normais, onde você pode adicionar expressões AngularJS, como em outras partes HTML do aplicativo AngularJS.
Estes arquivos parecem assim:
london.htm
<h1>London</h1>
<h3>London é a capital da Inglaterra.</h3>
<p>É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes.</p>
<p>{{msg}}</p>
paris.htm
<h1>Paris</h1>
<h3>Paris é a capital da França.</h3>
<p>A área de Paris é uma das maiores centros populacionais da Europa, com mais de 12 milhões de habitantes.</p>
<p>{{msg}}</p>
Template
No exemplo anterior, no $routeProvider.when foi usado Método templateUrl .
Você também pode usar Atributo template Atributo, que permite que você escreva diretamente HTML no valor do atributo, em vez de referenciar a página.
Exemplo
Escrever o template:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Clique nos links para mudar este conteúdo</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>As bananas contêm cerca de 75% de água.</p>"
})
.when("/tomate", {
template : "<h1>Tomate</h1><p>Os tomates contêm cerca de 95% de água.</p>"
});
});
método otherwise
No exemplo anterior, usamos $routeProvider o método when.
Você também pode usar otherwise Método, quando nenhum outro roteamento coincide, ele se torna o roteamento padrão.
Exemplo
Se ninguém clicar nos links "Banana" ou "Tomato", diga-lhes:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>As bananas contêm cerca de 75% de água.</p>"
})
.when("/tomate", {
template : "<h1>Tomate</h1><p>Os tomates contêm cerca de 95% de água.</p>"
})
.otherwise({
template : "<h1>Nenhum</h1><p>Nada foi selecionado</p>"
});
});
- Página Anterior Animação AngularJS
- Próxima Página Aplicações AngularJS
