AngularJS enrutamiento
En este capítulo vamos a introducir ruta AngularJS.
AngularJS enrutados a través de diferentes URL nos permite acceder a diferentes contenidos.
Por AngularJS pueden ver más de una página web (solo aplicaciones de aplicaciones web de una sola página, SPA).
Nuestro URL es por lo general en forma dehttp://w3big.com/first/page, pero en una sola página Aplicaciones Web AngularJS por marca # +conseguirse, por ejemplo:
http://w3big.com/#/first http://w3big.com/#/second http://w3big.com/#/third
Al hacer clic en cualquiera de los anteriores, cuando tenemos un enlace con el servidor por favor abordar son los mismos (http://w3big.com/). Debido a que el contenido después del signo # al final de la solicitud de servicio será ignorado por el navegador. Así que tenemos que aplicar la función de cliente de la tarde # en la implementación. AngularJS rutas para ayudarnos a través de unamarca + # para distinguir diferentes página lógica y páginas separadas con destino al controlador correspondiente.
En el gráfico anterior, podemos ver que crearon dos URL: / Gestión de pedidos y / AddNewOrder. Cada URL tiene una vista y el controlador correspondiente.
A continuación nos fijamos en un ejemplo sencillo:
<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>
ejemplos de análisis:
1, cargado implementar enrutamiento archivo JS: angulares-route.js.
2, contiene el módulo ngRoute como el módulo principal del módulo depende de la aplicación.
angular.module('routingDemoApp',['ngRoute'])3, utilizando la instrucción ngView.
<div ng-view></div>
El contenido HTML dentro del div basado en los cambios de ruta.
4, configure $ routeProvider, AngularJS $ routeProvider utiliza para definir las reglas de enrutamiento.
module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]);
config módulo AngularJS de función se utiliza para configurar las reglas de enrutamiento. Mediante el uso de configAPI, solicitamos que routeProvider $ inyecta en nuestra función de configuración y uso $ routeProvider.whenAPI para definir las reglas de enrutamiento.
$ RouteProvider nos proporcionan cuando (trazado, objeto) y de otro modo (objeto) función define todas las rutas en el orden que toma dos argumentos:
- El primer parámetro es la normativa de dirección URL habitual o URL.
- El segundo parámetro es el objeto de configuración de enrutamiento.
objeto de configuración de ruta
AngularJS ruta se puede lograr a través de diferentes plantillas.
La función $ routeProvider.when primer argumento es una URL regla regular o URL, el segundo parámetro de configuración de una ruta.reglas de sintaxis objeto de configuración de enrutamiento son los siguientes:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
Descripción de parámetros:
plantilla:
Si sólo tenemos que insertar un contenido HTML simple en ng-vista, a continuación, utilizar este parámetro:
.when('/computers',{template:'这是电脑分类页面'})templateUrl:
Si sólo tenemos que insertar los archivos de plantilla HTML en el ng-vista, a continuación, utilizar este parámetro:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html', });El código anterior obtendrá vistas desde el contenido del archivo del servidor / computers.html en el ng-view.
controlador:
función, tipo de cadena o matriz, función del controlador se ejecuta en la plantilla actual, crear un nuevo ámbito.
controllerAs:
tipo de cadena, especifica un alias para el controlador.
RedirectTo:
redirección de direcciones.
resolver:
Especifica el controlador actual se basa en otros módulos.
Ejemplos
<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>