Ejemplo de enrutamiento de AngularJS - ngRoute, $routeProvider

Hoy veremos el ejemplo de enrutamiento de AngularJS usando el módulo ngRoute y $routeProvider. Anteriormente analizamos los controladores AngularJS.

Enrutamiento en AngularJS

ngRoute

El módulo AngularJS ngRoute proporciona enrutamiento, servicios de enlace profundo y directivas para aplicaciones angulares. Tenemos que descargar el script angular-route.js que contiene el módulo ngRoute del sitio web oficial de AngularJS para usar la función de enrutamiento. También puede usar el CDN en su aplicación para incluir este archivo. En este tutorial, vamos a utilizar Google CDN. https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js Si está empaquetando este archivo en su aplicación, puede agregarlo a su página con el siguiente código.

<script src="angular-route.js">

Si desea incluirlo desde Google CDN, utilice el siguiente código.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>

Luego cargue el módulo ngRoute en su aplicación AngularJS agregándolo como un módulo dependiente como se muestra a continuación.

angular.module('appName', ['ngRoute']);

ngView

La directiva ngView se usa para mostrar las plantillas HTML o las vistas en las rutas especificadas. Cada vez que cambia la ruta actual, la vista incluida cambia con ella según la configuración del servicio $route.

$rutaProveedor

$routeProvider se usa para configurar las rutas. Usamos ngRoute config() para configurar $routeProvider. El config() toma una función que toma el $routeProvider como parámetro y la configuración de enrutamiento va dentro de la función. $routeProvider tiene una API simple, que acepta el método when() o otherwise().

Sintaxis de enrutamiento de AngularJS

La siguiente sintaxis se usa para configurar las rutas en AngularJS.

var app = angular.module("appName", ['ngRoute']);

app.config(function($routeProvider) {
	$routeProvider
		.when('/view1', {
			templateUrl: 'view1.html',
			controller: 'FirstController'
		})
		.when('/view2', {
			templateUrl: 'view2.html',
			controller: 'SecondController'
		})
		.otherwise({
			redirectTo: '/view1'
		});
});

El método when() toma un camino y una ruta como parámetros. ruta es una parte de la URL después del símbolo #. route contiene dos propiedades: templateUrl y controller. La propiedad templateUrl define qué plantilla HTML AngularJS debe cargar y mostrar dentro del div con la directiva ngView. La propiedad del controlador define qué controladores deben usarse con la plantilla HTML. Cuando se carga la aplicación, la ruta se compara con la parte de la URL después del símbolo #. Si ninguna ruta de ruta coincide con la URL dada, el navegador será redirigido a la ruta especificada en la función else().

Ejemplo de enrutamiento de AngularJS

Ahora veamos un ejemplo simple para comprender el enrutamiento de AngularJS. Al principio, definiremos un módulo, algunas rutas, crearemos controladores y crearemos múltiples vistas. Finalmente, crearemos la página de shell de nuestra aplicación para contener las múltiples vistas.

Cree un módulo llamado mainApp y cargue ngRoute como un módulo dependiente.
Configure las rutas usando $routeProvider.
Usamos dos rutas en el ejemplo, /home y /viewStudents.
Usamos un único controlador en este ejemplo, StudentController
StudentController se inicializa con una matriz de estudiantes y un mensaje. Mostraremos el mensaje en la página de inicio y la lista de estudiantes en la página ViewStudents.
Guarde este archivo como main.js

principal.js

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
	$routeProvider
		.when('/home', {
			templateUrl: 'home.html',
			controller: 'StudentController'
		})
		.when('/viewStudents', {
			templateUrl: 'viewStudents.html',
			controller: 'StudentController'
		})
		.otherwise({
			redirectTo: '/home'
		});
});

mainApp.controller('StudentController', function($scope) {
	$scope.students = [
		{name: 'Mark Waugh', city:'New York'},
		{name: 'Steve Jonathan', city:'London'},
		{name: 'John Marcus', city:'Paris'}
	];

	$scope.message = "Click on the hyper link to view the students list.";
});

Por ejemplo, si la URL es como https://www.journaldev.com/index.html#/home, la parte de la URL después de # coincide con /home, se cargará home. html y si coincide con /viewStudents, entonces cargará viewStudents.html en la página de shell. Si nada coincide, irá en la condición de lo contrario y la página se redirigirá a home.html. Ahora podemos crear nuestras vistas y guardarlas como archivos home.html y viewStudents.html. inicio.html

<div class="container">
	<h2> Welcome </h2>
	<p>{{message}}</p>
	<a href="#/viewStudents"> View Students List</a>
</div>

Esta es la página predeterminada de nuestra aplicación. En esta vista, simplemente imprimimos el mensaje, que ya hemos inicializado en StudentController. También puede ver un enlace a la página viewStudents. verEstudiantes.html

<div class="container">
	<h2> View Students </h2>
	Search:
	<br/>
		<input type="text" ng-model="name" />
	<br/>
	<ul>
		<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
	</ul>

	<a href="#/home"> Back</a>
</div>

En la vista anterior, puede ver una lista de estudiantes con una opción de búsqueda. Finalmente, siga los pasos a continuación para completar nuestra aplicación de ejemplo de enrutamiento AngularJS.

ng-app arranca automáticamente nuestra aplicación mainApp
ngView es el marcador de posición de las vistas: home.html y viewStudents.html
Incluye angular.min.js y angular-route.min.js
Incluye main.js que hemos creado en los pasos anteriores.
Guarde el archivo como index.html

index.html

<!DOCTYPE html>
<html>
	<head lang="en">
	  <meta charset="utf-8">
	  <title>AngularJS Routing</title>

	</head>
	<body>

	  <div ng-app="mainApp">
		<ng-view></ng-view>
	  </div>

	  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
	  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
	  <script type="text/javascript" src="main.js"></script>
	</body>
</html>

Eso es todo para nuestro ejemplo de enrutamiento AngularJS. Nuestra aplicación está lista para ejecutarse.

Ejecute su aplicación

Guarde todos los archivos en el mismo directorio.
abre index.html desde tu navegador
Pruebe nuestra demostración en línea.