El mejor tutorial de AngularJS enrutamiento en 2024. En este tutorial podrás aprender objeto de configuración de ruta,
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://w3write.com/first/page, pero en una sola página Aplicaciones Web AngularJS por marca # +conseguirse, por ejemplo:
http://w3write.com/#/first http://w3write.com/#/second http://w3write.com/#/third
Al hacer clic en cualquiera de los anteriores, cuando tenemos un enlace con el servidor por favor abordar son los mismos (http://w3write.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:
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', });
El código anterior obtendrá vistas desde el contenido del archivo del servidor / computers 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.
<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', controller: 'HomeController' }). when('/about', { templateUrl: 'embedded.about', controller: 'AboutController' }). otherwise({ redirectTo: '/home' }); }); </script> </head> <body ng-app="ngRouteExample" class="ng-scope"> <script type="text/ng-template" id="embedded.home"> <h1> Home </h1> </script> <script type="text/ng-template" id="embedded.about"> <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>