Rutas AngularJS
- Página anterior Animaciones AngularJS
- Página siguiente Aplicaciones AngularJS
ngRoute El módulo ayuda a su aplicación a convertirse en una aplicación de una sola página.
¿Qué es la routing en AngularJS?
Si desea navegar a diferentes páginas de la aplicación pero también desea que la aplicación sea una SPA (aplicación de una sola página) y sin recarga de página, puede usar ngRoute Módulo.
ngRoute El módulo dirige su aplicación a diferentes páginas sin recargar toda la aplicación.
Ejemplo
Navegue a "red.htm", "green.htm" y "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">página principal</a></p>
<a href="#!red">rojo</a>
<a href="#!green">verde</a>
<a href="#!blue">azul</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
¿Qué necesito?
Para preparar su aplicación para las rutas, debe incluir el módulo AngularJS Route:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Luego, debe incluir ngRoute Agregar como dependencia en el módulo de la aplicación:
var app = angular.module("myApp", ["ngRoute"]);
Ahora su aplicación puede acceder a lo que se ofrece $routeProvider módulo de rutas.
Por favor use $routeProvider Configurar diferentes rutas en la aplicación:
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
¿Dónde está?
Su aplicación necesita un contenedor para放置rutas proporcionadas por el enrutador.
Este contenedor es ng-view
Se puede incluir la directiva de tres formas diferentes en la aplicación. ng-view directiva：
Ejemplo
<div ng-view></div>
Ejemplo
<ng-view></ng-view>
Ejemplo
<div class="ng-view"></div>
La aplicación solo puede tener una ng-view directiva, que será el marcador de posición para todas las vistas proporcionadas por la ruta.
$routeProvider
Usar $routeProvider，puede definir la página que se mostrará al hacer clic en el enlace.
Ejemplo
definir $routeProvider：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
usando la aplicación de config método definido $routeProvider。Se ejecutará en el momento de la carga de la aplicación en config trabajo registrado en métodos.
controladores
Usar $routeProvider，también puede definir un controlador para cada "vista".
Ejemplo
Agregar controlador:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controlador : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controlador : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "Me encanta Londres";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" y "paris.htm" son archivos HTML normales, en los que puede agregar expresiones AngularJS, al igual que en otras partes HTML de la aplicación AngularJS.
Estos archivos se ven así:
london.htm
<h1>Londres</h1>
<h3> Londres es la capital de Inglaterra.</h3>
<p>Es la ciudad más poblada del Reino Unido, con una área metropolitana de más de 13 millones de habitantes.</p>
<p>{{msg}}</p>
paris.htm
<h1>París</h1>
<h3>París es la capital de Francia.</h3>
<p>La región de París es una de las áreas urbanas más grandes de Europa, con más de 12 millones de habitantes.</p>
<p>{{msg}}</p>
Plantilla
En el ejemplo anterior, en $routeProvider.when se usó Método templateUrl .
También puede usar Atributo template Atributo, que le permite escribir HTML directamente en el valor del atributo, en lugar de referirse a la página.
Ejemplo
Escribir plantilla:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Haga clic en los enlaces para cambiar este contenido</p>"
})
.when("/banana", {
template : "<h1>Plátano</h1><p>Los plátanos contienen alrededor del 75% de agua.</p>"
})
.when("/tomate", {
template : "<h1>Tomate</h1><p>Los tomates contienen alrededor del 95% de agua.</p>"
});
});
método otherwise
En el ejemplo anterior, usamos $routeProvider el método when.
También puede usar otherwise Método, cuando no coinciden todas las rutas, se convertirá en la ruta predeterminada.
Ejemplo
Si ni hacen clic en el enlace "Banana" ni en el enlace "Tomato", dícales:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Plátano</h1><p>Los plátanos contienen alrededor del 75% de agua.</p>"
})
.when("/tomate", {
template : "<h1>Tomate</h1><p>Los tomates contienen alrededor del 95% de agua.</p>"
})
.otherwise({
template : "<h1>Ninguno</h1><p>Nada ha sido seleccionado</p>"
});
});
- Página anterior Animaciones AngularJS
- Página siguiente Aplicaciones AngularJS
