AngularJS Routing
Este capítulo vamos apresentar rota AngularJS.
AngularJS encaminhadas através de URL diferente nos permite acessar conteúdo diferente.
Por AngularJS pode ver mais do que uma página única aplicações Web (aplicação web única página, SPA).
O nosso URL é tipicamente na forma dehttp://w3big.com/first/page, mas em uma única página Web aplicações AngularJS por marca # +conseguido, por exemplo:
http://w3big.com/#/first http://w3big.com/#/second http://w3big.com/#/third
Ao clicar em qualquer um dos acima, quando temos um link para o servidor, por favor dirigir são os mesmos (http://w3big.com/). Porque o conteúdo após o sinal # no final do pedido de serviço serão ignorados pelo navegador. Por isso, precisamos de implementar a função de cliente do # mais tarde na implementação. AngularJS rotas para nos ajudar através de umamarca de # + para distinguir página lógica diferente e páginas separadas ligados ao controlador correspondente.
No gráfico acima, podemos ver que criou dois URL: / ShowOrders e / AddNewOrder. Cada URL tem uma visão e um controlador correspondente.
Em seguida olhamos para um exemplo simples:
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 本教程</title>
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
exemplos de análise:
1, carregado implementar roteamento arquivo JS: angulares-route.js.
2, contém módulo ngRoute como o módulo módulo de aplicação dependente principal.
angular.module('routingDemoApp',['ngRoute'])3, usando a instrução ngView.
<div ng-view></div>
conteúdo HTML dentro da div com base em mudanças de rota.
4, configure $ routeProvider, AngularJS $ routeProvider usada para definir regras de roteamento.
module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]);
configuração do módulo AngularJS função é utilizada para configurar regras de roteamento. Usando configAPI, solicitamos que $ routeProvider injetado em nossa função de configuração e utilização $ routeProvider.whenAPI para definir as nossas regras de roteamento.
$ RouteProvider fornecer-nos quando (caminho, objeto) e de outra forma (objeto) função define todas as rotas na ordem em que leva dois argumentos:
- O primeiro parâmetro é a legislação de URL regular ou URL.
- O segundo parâmetro é o objeto de configuração de roteamento.
objeto de configurações de rota
AngularJS rota pode ser alcançada através de diferentes modelos.
O primeiro argumento da função $ routeProvider.when é uma URL regra regular ou URL, a segunda configuração de parâmetros de uma rota.Configuração de roteamento regras objeto de sintaxe são as seguintes:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
Parâmetro Descrição:
template:
Se nós só precisamos inserir um conteúdo HTML simples no ng-view, em seguida, usar esse parâmetro:
.when('/computers',{template:'这是电脑分类页面'})templateUrl:
Se nós só precisa inserir os arquivos de modelo HTML no ng-view, em seguida, usar esse parâmetro:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html', });O código acima irá obter vistas a partir do conteúdo de arquivos do servidor / computers.html no ng-view.
controlador:
função, string ou tipo de matriz, a função do controlador é executado no modelo atual, crie um novo escopo.
controllerAs:
tipo string, especificar um alias para o controlador.
redirectTo:
redirecionamento de endereço.
resolver:
Especifica o controlador de corrente depende de outros módulos.
Exemplos
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
</head>
<body ng-app="ngRouteExample" class="ng-scope">
<script type="text/ng-template" id="embedded.home.html">
<h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
<h1> About </h1>
</script>
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view="">
</div>
</div>
</body>
</html>