Recientemente, un colega encontró algunos problemas en el proceso de rutas y plantillas de aprendizaje. Así que hoy escribí un ejemplo para ella y lo compartí con aquellos que están aprendiendo angularjs.
Hablando de eso, el Proyecto de Desarrollo AngularJS es muy emocionante, y la diversión es su modelo de desarrollo, que hace que el código sea más claro, más legible, más conciso y más mantenible. Sin embargo, también hay cosas que me dan dolor de cabeza al desarrollar el uso de AngularJS, es decir, el marco frontal actual se centra más en jQuery, y muchos complementos dependen de jQuery, y hay muy pocos complementos para AngulaJs (no conozco otros complementos angulares excepto Angularui. Si cualquier maestro te guía, puede compartirlos con mí). Para garantizar que el código en el controlador sea claro y no confuso, estipulamos que DOM no puede ser operado en el controlador, por lo que cada vez que necesitamos operar el elemento DOM, somos instrucciones para completarlo, por lo que existe. Muchos complementos de jQuery deben convertirse en instrucciones para operar, lo cual es algo muy desagradable. Parece estar muy lejos, ok ~~
Tabla de contenido:
1. Introducción de enrutamiento de AngularJS
2. Instancia de enrutamiento de AngularJS
3. AngularJS utiliza el enrutamiento del modo HTML5 combinado con la redirección del servidor web para simplificar las direcciones de enrutamiento
1. Introducción de enrutamiento de AngularJS
El enrutamiento AngularJS es diferente del enrutamiento MVC de backend. El enrutamiento frontal de AngularJS requiere definir las reglas de enrutamiento (RoutepRoVider) para el (NG-APP) especificado de antemano en la página de plantilla, y luego decir (NG-APP) qué página (HTML) cargar a través de diferentes URL, y luego convertirlas en la vista (NG-APP) (NG-View). El enrutamiento MVC es solicitar la acción del controlador a través de diferentes solicitudes de URL y luego devolver la vista de acuerdo con las reglas de enrutamiento. AngularJS es una ruta frontal pura. Más tarde, combinaremos archivos de configuración para simplificar las direcciones de enrutamiento.
2. Instancia de enrutamiento de AngularJS
Creamos un nuevo archivo JS, aquí lo nombro App.js y escribimos el siguiente código en el archivo:
1 angular.module ("app", [2 'ngroute' 3]) 4 .config (['$ ruteprovider', function ($ ruteprovider) {5 $ routeprovider.when ("/list", {6 plantilla: "Esta es la página de lista" 7}). Cuando ("/detalle", {8 plantilla: "Esta es la página de detalles" 9}) 10. redirecto: "/list" 12}) 13}])
Creamos un nuevo archivo HTML y lo nombramos index.html. El código y la descripción son los siguientes:
1 <! Doctype html> 2 <html xmlns = "http://www.w3.org/1999/xhtml" ng-apx = "app"> 3 <cead> 4 <title> </title> 5 </thead> 6 <body> 7 <ciebe> 8 <h2> Esto es el jefe </h2> 9 </header> 10 <tiv <hiv> ng-view> </div> 12 </tent content> 13 <footer> 14 <h3> Este es el fondo </h3> 15 </tafeer> 16 </body> 17 </html> 18 <script src = "/scripts/angular/angular.min.js"> </script> 19 <script src = "/scripts/angular-route-route-rute-raute.mins.mins.mins ".mins". <script src = "/scripts/app.js"> </script>
Ejecute el ejemplo, el efecto es el siguiente.
Abra la dirección de entrada del navegador: http: // localhost: 2987/index.html#/detalle y http: // localhost: 2987/index.html#/list respectivamente, puede ver las páginas que se muestran en la siguiente figura:
3. AngularJS utiliza el enrutamiento del modo HTML5 combinado con WebServer para simplificar las direcciones de enrutamiento
En la imagen de arriba, podemos ver que la dirección de solicitud es muy larga. Es difícil para mí que tenga un trastorno obsesivo compulsivo aceptar este tipo de dirección, por lo que decidí hacer tal cambio:
1) AngulaJS habilita el enrutamiento del modo HTML5 y elimina el número #:
Para AngulaJs, el valor predeterminado es que el modo de enrutamiento HTML5 no está activado. Habilitamos el modo de enrutamiento HTML5 siguiendo los siguientes métodos:
1 Angular.module ("App", [2 'Ngroute' 3]) 4 .config (['$ RoutepRoVider', '$ UbicationProvider', function ($ Routeprovider, $ UbocationProvider) {5 // Abrir HTML5 Modo de enrutamiento 6 $ Ubicación Página "9}). Cuando ("/detalle ", {10 plantilla:" Esta es la página de detalles "11}) 12 .Otrewise ({13 redirecto:" /404.html"14}) 15}])))
De esta manera, después de eliminar el número # de acuerdo con la dirección de solicitud anterior, la página se actualizó. El aviso 404 no pudo encontrar la página. La razón es que si se solicita dicha dirección a los antecedentes IIS, el archivo correspondiente no se encontrará, por lo que la página de error 404 se devolverá directamente. Por lo tanto, necesitamos agregar la configuración del servidor web al archivo de configuración y redirigir el archivo de la siguiente manera:
1 <System.WebServer> 2 <REWRITE> 3 <reglas> 4 <name de regla = "name"> 5 <Match url = "^list | Detalle*" Ignorecase = "true"/> 6 <Condiciones LogicalGrouping = "Matchall"> 7 <add input = "{request_filenEnmen}" MatchType = "ISFIL matchType = "isDirectory" neguate = "true"/> 9 </ditions> 10 <Action type = "rewrite" url = "/index.html"/> 11 </regla> 12 </sules> 13 </swrite> 14 </system.webserver>
Como se muestra en el código anterior, el <Match url = "^List | Detalle*" IgnoreCase = "True"/> significa que si la dirección de solicitud contiene una lista o detalle (escriba la expresión regular de acuerdo con los requisitos), se redirigirá a la página index.html. Al ingresar http: // localhost: 2987/detalle en la página, IIS primero volverá a la página de plantilla (index.html), y luego la ruta AngulaJs comenzará a ejecutarse.
Ingrese http: // localhost: 2987/detalle en el navegador y descubrió que no obtuvimos el resultado que queríamos, es decir, la ruta no coincidía.
Después de buscar en línea durante mucho tiempo, finalmente encontré la solución, que es agregar la etiqueta <sase> a la página HTML de la siguiente manera:
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <title></title> 5 <base href="/" /> 6 </head> 7 <body> 8 <header> 9 <h2>This is the head</h2>10 </Header> 11 <Content> 12 <Div ng-view> </div> 13 </tent content> 14 <footer> 15 <h3> Este es el fondo </h3> 16 </footer> 17 </body> 18 </html> 19 <script src = "/scripts/angular/angular.min.js"> </script> 20 <scrito src = "/scripts/angular-rute/angular-rute.min.js"> </script> 21 <script src = "/scripts/app.js"> </script>
De esta manera, ingrese: http: // localhost: 2987/detalle en el navegador y verá el resultado que queremos. La captura de pantalla es la siguiente:
Pregunta heredada: ¿Por qué puede tener éxito agregando la etiqueta <base href = " /" />? Me gustaría hacer a todos los bloggers sobre esta pregunta.
Si hay algo malo en el contenido anterior, ¡quejes de ello! ! !
Lo anterior es el contenido completo del enrutamiento AngularJS y los ejemplos de plantilla y los métodos de simplificación de la dirección de enrutamiento (imprescindible) que el editor le presenta. Espero que todos apoyen a Wulin.com más ~