Enrutamiento AngularJS
Poder saltar de una vista de una página a otra es crucial para aplicaciones de una sola página. A medida que las aplicaciones se vuelven cada vez más complejas, necesitamos una forma razonable de administrar las interfaces que los usuarios ven durante el uso. AngularJS practica para dividir la vista en las vistas de diseño y plantilla, y mostrar la vista correspondiente de acuerdo con la URL actuada actualmente por el usuario.
Este artículo proporciona un ejemplo simple de enrutamiento AngularJS y menciona algunos de los conceptos que implica.
1. Página de diseño
Scripts de cita:
<script src = "../ scripts/jQuery-1.9.1.min.js"> </script> <script src = "../ scripts/angular.min.js"> </script> <script src = "../ scripts/angular-route.min.js"> </script> </script>
El diseño de la página es relativamente simple:
<Div> <ul> <li> <a href = "#Page1"> vaya Página 1 </a> </li> <li> <a href = "#Page2"> vaya Página 2 </a> </li> <li> <a href = "#otra"> a otra página </a> </li> </ul> </div> <Diver ng-view> </div> </div>
Ng-View es una directiva especial proporcionada por el módulo Ngroute que le dice a AngularJS dónde representar la plantilla. En este ejemplo, ponemos el contenido que necesitamos para representar en el DIV a continuación. Los tres enlaces anteriores apuntan a tres vistas de vista respectivamente.
2. Página de plantilla
Cree dos páginas de plantilla, llamadas subpage_1.html y subpage_2.html, respectivamente.
3. Reglas de enrutamiento Configuración de enrutamiento
angular.module ("myRouteApp", ["ngroute"]) .config (['$ ruteProvider', function ($ ruteprovider) {$ rututeprovider .When ("/page1", {TemplateUrl: "subpage_1.html"}) .when ("/page2", {Templateurl: "Subpage_2.hml"}). .otherwise({ redirectTo: "/" }); }]);Cargue el módulo ngroute como una dependencia en nuestra aplicación. Use la función de configuración para definir rutas en módulos o aplicaciones, y use los dos métodos proporcionados por AngularJS para definir rutas a las aplicaciones.
TemplateUrl:
La aplicación lee la vista a través de XHR (o lee desde $ TemplateCache) en función de la ruta especificada por la propiedad TemplateURL. Si esta plantilla se puede encontrar y leer, AngularJS convierte el contenido de la plantilla en un elemento DOM con la Directiva NG-View.
Redirecto:
Si el valor de la propiedad redirección es una cadena, la ruta se reemplazará con este valor y el cambio de enrutamiento se activará de acuerdo con la ruta de destino. Si el valor de la propiedad redirección es una función, la ruta se reemplazará con el valor de retorno de la función y el cambio de enrutamiento se activará de acuerdo con esta ruta de destino.
Resultados de ejecución
Haga clic en Go Page 1
Haga clic en Go Page 2
El código de ejemplo de ruta de enrutamiento angular anterior es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.