Enrutamiento AngularJS
En este capítulo le presentaremos el enrutamiento AngularJS.
El enrutamiento AngularJS nos permite acceder a diferentes contenidos a través de diferentes URL.
AngularJS puede realizar una aplicación web de una sola página (SPA) para múltiples vistas.
Por lo general, nuestra URL es http://runoob.com/first/page, pero en una sola aplicación web, AngularJS se implementa a través de #+ etiquetas, por ejemplo:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Cuando hacemos clic en cualquiera de los enlaces anteriores, la dirección que solicitamos al servidor es la misma (http://runoob.com/). Porque el contenido después del número # será ignorado por el navegador al solicitarlo al servidor. Por lo tanto, necesitamos implementar la función del contenido después del número # en el cliente. El enrutamiento AngularJS nos ayuda a distinguir diferentes páginas lógicas y unir diferentes páginas al controlador correspondiente a través de la etiqueta #+.
En la figura anterior, podemos ver que se crean dos URL: /Showorders y /AddNeworder. Cada URL tiene una vista y controlador correspondientes.
A continuación, echemos un vistazo a un ejemplo simple:
<html> <head> <meta charset="utf-8"> <title>AngularJS routing example- Novice tutorial</title> </head> <body ng-app='routingDemoApp'> <h2>AngularJS routing application</h2> <ul> <li><a href="#/">Home</a></li> <li><a href = "#/computadoras"> computadoras </a> </li> <li> <a href = "#/impresors"> imprimir </a> </li> <li> <a href = "#/blabla"> Otro </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> Angular.module ('RoutingDemoApp', ['ngroute']) .config (['$ ruteProvider', function ($ ruteProvider) {$ ruteProvider .When ('/', {Template: 'Esta es la página homepage'}) .When ('/Computers', {Template: 'Esta es la página de clasificación de computación'}})}) .When ('/impresors', {plantilla: 'Esta es la página de la impresora'}) .Othrewise ({redirectO: '/'}); </script> </body> </html>Resultados de ejecución:
Aplicación de enrutamiento AngularJS
Análisis de ejemplo:
1. Cargue el archivo js que implementa el enrutamiento: angular-rutee.js.
2. Contiene el módulo ngroute como el módulo de dependencia del módulo de aplicación principal.
Angular.module ('RoutingDemoApp', ['ngroute'])
3. Use la Directiva NGVIEW.
<Div ng-view> </div>
El contenido HTML dentro de este DIV cambiará de acuerdo con los cambios de ruta.
Configurar $ RoutepRovider, AngularJS $ Routeprovider se utiliza para definir las reglas de enrutamiento.
MODULE.Config (['$ RoutepRoVider', function ($ RoutepRoVider) {$ RoutepRoVider .When ('/', {Template: 'Esta es la página de inicio'}) .When ('/Computers', {Template: 'Esta es la página de clasificación de informática'}) .when ('/Printers', {Tempate: 'Esto es la página de Preinter'}). .Othrewise ({redirectTO: '/'});}]);La función de configuración del módulo AngularJS se utiliza para configurar las reglas de enrutamiento. Al usar ConfigApi, solicitamos que se inyecten $ RoutepRoVider en nuestra función de configuración y definir nuestras reglas de enrutamiento utilizando $ Routeprovider.WhenApi.
$ Routeprovider nos proporciona la función When (ruta, objeto) y de lo contrario (objeto) define todas las rutas en orden, y la función contiene dos parámetros:
El primer parámetro es una regla regular de URL o URL.
El segundo parámetro es el objeto de configuración de enrutamiento.
Objeto de configuración de enrutamiento
El enrutamiento AngularJS también se puede implementar a través de diferentes plantillas.
El primer parámetro de $ RoutepRovider. Cuando la función es una regla regular de URL o URL, y el segundo parámetro es un objeto de configuración de enrutamiento.
Las reglas de sintaxis para los objetos de configuración de enrutamiento son las siguientes:
$ Routeprovider.When (url, {Template: String, TemplateUrl: String, Controller: String, Function o Array, Controlleras: String, RedirectTO: String, Function, Resolve: Object <Key, Function>});Descripción del parámetro:
plantilla:
Si solo necesitamos insertar contenido HTML simple en NG-View, use este parámetro:
.Whher ('/Computers', {plantilla: 'Esta es la página de clasificación de computadoras'})
TemplateUrl:
Si solo necesitamos insertar el archivo de plantilla HTML en NG-View, use este parámetro:
$ Routeprovider.When ('/Computers', {TemplateUrl: 'Views/Computers.html',});El código anterior obtendrá el contenido del archivo Views/Computers.html desde el servidor e insertará en la vista NG.
controlador:
Función, cadena o tipo de matriz, la función de controlador ejecutada en la plantilla actual genera un nuevo alcance.
Controleras:
Tipo de cadena, especifique un alias para el controlador.
Redirecto:
La dirección de la redirección.
resolver:
Especifica otros módulos en los que depende el controlador actual.
Ejemplo
<html> <fead> <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> <scritch> src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </script> <script type = "text/javascript"> angular.module ('ngrouteexample, [' ngroute ']). Controler (' homecontroller ', function ($ scope) {$ scope. $ ruta;}). Controller ('AboutController', function ($ scope) {$ scope. $ ruta = $ ruta;}). config (function ($ rututeprovider) {$ rutineprovider. When ('/home', { 'incrustado.about.html', controlador: 'Acerca deController'}). </script> <script type = "text/ng-template" id = "incredded.about.html"> <h1> acerca de </h1> </script> <div> <divi Id = "navegación"> <a href = "#/home"> home </a> <a href = "#/#/sobre"> sobre </a> </div div ng-view "" </div> </body> </html>Resultados de ejecución:
Hogar
Hogar
Lo anterior es una recopilación de información sobre el enrutamiento AngularJS. Espero que los estudiantes que puedan ayudar a la programación AngularJS.