Enrutamiento AngularJS
El ngRoutemódulo ayuda a que su aplicación se convierta en una aplicación de una sola página.
¿Qué es el enrutamiento en AngularJS?
Si desea navegar a diferentes páginas en su aplicación, pero también desea que la aplicación sea una SPA (aplicación de una sola página), sin recargar la página, puede usar el ngRoutemódulo.
El ngRoutemódulo enruta su aplicación a diferentes páginas sin recargar toda la aplicación.
Ejemplo:
Navegue hasta "red.htm", "green.htm" y "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</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 sus aplicaciones para el enrutamiento, debe incluir el módulo de ruta de AngularJS:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Luego debes agregar el ngRoutecomo dependencia en el módulo de la aplicación:
var app = angular.module("myApp", ["ngRoute"]);
Ahora su aplicación tiene acceso al módulo de ruta, que proporciona el archivo $routeProvider.
Use $routeProviderpara configurar diferentes rutas en su 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"
});
});
¿A dónde va?
Su aplicación necesita un contenedor para colocar el contenido proporcionado por el enrutamiento.
Este contenedor es la ng-viewdirectiva.
Hay tres formas diferentes de incluir la ng-viewdirectiva en su aplicación:
Ejemplo:
<div ng-view></div>
Ejemplo:
<ng-view></ng-view>
Ejemplo:
<div
class="ng-view"></div>
Las aplicaciones solo pueden tener una ng-viewdirectiva, y esta será el marcador de posición para todas las vistas proporcionadas por la ruta.
$rutaProveedor
Con $routeProviderpuede definir qué página mostrar cuando un usuario hace clic en un enlace.
Ejemplo:
Definir un $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"
});
});
Defina el $routeProvideruso del configmétodo de su aplicación. El trabajo registrado en el configmétodo se realizará cuando se esté cargando la aplicación.
Controladores
Con el $routeProvidertambién puede definir un controlador para cada "vista".
Ejemplo:
Añadir controladores:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
"london.htm" y "paris.htm" son archivos HTML normales, a los que puede agregar expresiones AngularJS como lo haría con cualquier otra sección HTML de su aplicación AngularJS.
Los archivos se ven así:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Plantilla
En los ejemplos anteriores hemos utilizado la templateUrlpropiedad en el
$routeProvider.whenmétodo.
También puede usar la templatepropiedad, que le permite escribir HTML directamente en el valor de la propiedad y no hacer referencia a una página.
Ejemplo:
Escribir plantillas:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
El método de lo contrario
En los ejemplos anteriores hemos utilizado el whenmétodo del $routeProvider.
También puede usar el otherwisemétodo, que es la ruta predeterminada cuando ninguno de los otros obtiene una coincidencia.
Ejemplo:
Si no se ha hecho clic en el enlace "Plátano" ni en el de "Tomate", infórmeles:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});