premisa
Primero, debe introducir la ruta angular y angular en la página. Tenga en cuenta que debe introducir angular antes de la ruta angular.
<script src = "../../ bower_components/angular/angular.js"> </script>
<script src = "../../ bower_components/angular-rute/angular-rute.js"> </script>
Esto se debe principalmente a que Angular-Rutee.js debe pasar en la ventana. Parámetro angular, y este parámetro solo aparecerá después de que Angular se carga.
(función (ventana, angular, indefinida) {'use estricto'; ... ngroutemodule.Directive ('ngView', ngViewFactory); ...}) (Window.angular);Puede descargarlo en el sitio web oficial o instalarlo con Bower.
explicar
La función de enrutamiento es implementada por el servicio RoutProvider y NG-View. Ng-View es equivalente a proporcionar el punto de montaje de la plantilla de página. Al cambiar la URL para saltar, se colocarán diferentes plantillas de página en la ubicación de Ng-View; Luego, Routeprovider se utiliza para configurar la asignación de ruta.
Hay dos métodos en general:
When (): configure ruta y parámetros;
De lo contrario: configure otros saltos de ruta, puede pensar que es predeterminado.
El segundo parámetro de cuándo:
Controlador: la función del controlador o el nombre de la ruta correspondiente
Controlleras: le dé un nombre de alias al controlador
Template: la plantilla de página correspondiente a la ruta aparecerá en Ng-View, como "<iv> xxxx </div>"
TemplateUrl: la ruta correspondiente a la plantilla, como "src/xxx.html"
Resolver: este parámetro se centra en el hecho de que esta propiedad vinculará los servicios o valores al controlador relacionado con la ruta en forma de un objeto de par de valor clave. Entonces el valor del resultado de la ejecución o la referencia del servicio correspondiente se inyectan en el controlador. Si la resolución es un objeto prometedor, esperará hasta que se ejecute con éxito antes de inyectarse en el controlador. En este momento, el controlador esperará el resultado de la ejecución en resolución.
Para ejemplos detallados, consulte los siguientes ejemplos.
Redirección: dirección de redirección
ReloadonSearch: establezca si la plantilla correspondiente se cargará solo cuando se cambie la dirección; Ni la búsqueda ni los parámetros se cargarán.
CaseInsensIsIniveMatch: la ruta es sensible a la caja
Hay varios eventos de uso común para el enrutamiento:
$ RoutechangeStart: este evento se activará antes de que salte la ruta
$ Routechangesuccess: este evento se activa después de que el salto de ruta sea exitoso
$ RoutechangeError: este evento se dispara después de que falló el salto de la ruta
usar
En la página, escriba el enlace del botón al salto de la URL y la etiqueta NG-View
<div ng-concontroller = "myctrl"> <ul> <li> <a href = "#/a"> haga clic en </a> </li> <li> <a href = "#/b"> haga clic b </a> </li> </ul> <ng-view>
Entre ellos, Ng-View puede considerarse como un elemento o una etiqueta, etc.
Configuraciones relacionadas que deben definirse en JavaScript
<script type = "text/javaScript"> angular.module ("myApp", ["ngroute"]) .controller ("acontroller", function ($ scope, $ ruta) {$ scope.hello = "hello, a!";}) .controller ("bController", function ($ scope) {$ scope.hello = ";"; .controller ("myctrl", function ($ scope, $ ubicación) {$ scope. $ on ("$ viewContentLoaded", function () {console.log ("ng-view content con carga cargada");}); $ scope. $ on ("$ rutechangeStart", function (event, siguiente, actual) {//event.preventventEfault (); console.log ("Ruta de inicio!"); }) .config (function ($ rutomeProvider, $ ubationProvider) {$ rutinProvider .When ('/a', {templateUrl: 'a.html', controlador: 'acontroller'}) .When ('/b', {TemplateUrl: 'b.html', controlador: 'BController', resolve: to {Tain a {Tain a {3 retraso: funciones ($ q, $ timeOut) {Var demora = $ Q.DEFER (); </script>En el código anterior, la resolución en la ruta /B está asociada con un método de retraso. Este método devuelve el objeto Promise y devolverá el resultado solo después de 3 segundos. Por lo tanto, la página B no se cargará con éxito después de 3 segundos.
Se requieren dos HTML adicionales:
a.html:
<div ng-confontroller = "acontroller" style = "altura: 500px; width: 100%; background-color: green;"> {{hola}} </div>
Y B.html:
<div ng-confontroller = "bcontroller" style = "altura: 2500px; ancho: 100%; background-color: blue;"> {{hola}} </div>
De esta manera, se puede lograr el salto de ruta.
Se pueden hacer referencia a todos los códigos:
<<html ng-app = "myApp"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <schitch src = "../../ bower_components/angular/angular.js"> </script> <Writk src="../../bower_components/angular-route/angular-route.js"></script><body> <div ng-controller="myCtrl"> <ul> <li><a href="#/a">click a</a></li> <li><a href="#/b">click b</a></li> </ul> <ng-view> </ng-view> <!-<div ng-view> </div>-> </div> <script type = "text/javaScript"> angular.module ("myapp", ["ngroute"]) .controller ("acontroller", function ($ scope, $ ruta) {$ scope.hello = "hello, a!"; ";") .controller ("bcontroller", function ($ scope) {$ scope.hello = "hello, b!";}) .controller ("myctrl", function ($ scope, $ ubicación) {$ scope. $ on ("$ viewContented", function () {console.log ("ng-view content loadeded!");});});});}); $ Scope. $ on ("$ RoutechangeStart", function (Event, Next, actual) {//event.preventDefault (); // Cancelar URL Cambiar console.log ("¡Inicio de cambio de ruta!");}); }) .config (function ($ rutomeProvider, $ ubationProvider) {$ rutinProvider .When ('/a', {TemplateUrl: 'a.html', controlador: 'acontroller'}) .When ('/b', {TemplateUrl: 'b.html', controlador: 'BController', resolve: resolve: 1 1. retraso: funciones ($ q, $ timeOut) {Var demora = $ Q.DEFER (); </script> </body> </html>Lo anterior es la información que clasifica la información de enrutamiento AngularJS Ng-Rutee. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!