Ejemplo de enrutamiento de AngularJS – ngRoute, $routeProvider

Hoy veremos el ejemplo de AngularJS Routing usando el módulo ngRoute y $routeProvider. Anteriormente hemos mirado en los módulos de AngularJS y los controladores de AngularJS.

Índice

Rutas en AngularJS

El enrutamiento en AngularJS es una de las características principales. En este ejemplo de enrutamiento de AngularJS, construiremos una pequeña aplicación de una sola página con múltiples vistas para mostrarle cómo funciona el enrutamiento en AngularJS.

ngRoute

El módulo ngRoute de AngularJS proporciona servicios de enrutamiento, enlaces profundos y directivas para aplicaciones angulares. Tenemos que descargar el script angular-route.js que contiene el módulo ngRoute de la página web oficial de AngularJS para utilizar la función de enrutamiento.

También puedes usar el CDN en tu aplicación para incluir este archivo. En este tutorial, vamos a utilizar el CDN de Google.

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js

Si usted está agregando este archivo a su aplicación, entonces puede agregarlo a su página con el siguiente código.

<script src="angular-route.js"

Si quieres incluirlo desde Google CDN, entonces usa 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($0027appName$0027, [$0027ngRoute$0027]);

ngView

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

$routeProvider

$routeProvider se utiliza para configurar las rutas. Usamos el ngRoute config() para configurar el $routeProvider. El config() toma una función que toma el $routeProvider como parámetro y la configuración de la ruta va dentro de la función.

$routeProvider tiene una simple API, aceptando el método when() o otherwise().

Sintaxis de ruta de la SJ angular

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

var app = angular.module("appName", [$0027ngRoute$0027]);app.config(function($routeProvider) { $routeProvider .when($0027/view1$0027, { templateUrl: $0027view1. html$0027, controlador: $0027PrimerControlador$0027 }) .when($0027/vista2$0027, { templateUrl: $0027vista2.html$0027, controlador: $0027SegundoControlador$0027 }) .otherwise({ redirectTo: $0027/vista1$0027 });});

El método when() toma como parámetros una ruta y una ruta .

La ruta es una parte del URL después del símbolo #.

La ruta contiene dos propiedades – templateUrl y controlador.

La propiedad templateUrl define qué plantilla HTML AngularJS debe cargar y mostrar dentro del div con la directiva ngView.

La propiedad controller define qué controladores deben ser utilizados con la plantilla HTML.

Cuando se carga la aplicación, la ruta se coteja con la parte del URL después del símbolo #. Si ningún camino de ruta coincide con la URL dada, el navegador será redirigido a la ruta especificada en la función otherwise().

Ejemplo de enrutamiento de AngularJS

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

1. Crear un módulo llamado mainApp y cargar ngRoute como un módulo dependiente.
2. Configura las rutas usando $routeProvider.
3. Usamos dos caminos en el ejemplo, /home y /viewStudents.
4. En este ejemplo utilizamos un solo controlador, StudentController
5. El StudentController se inicia con un conjunto de estudiantes y un mensaje. Mostraremos el mensaje en la página de inicio y la lista de estudiantes en la página de ViewStudents.
6. Guarda este archivo como main.js

main.js

var mainApp = angular.module("mainApp", [$0027ngRoute$0027]);mainApp.config(function($routeProvider) { $routeProvider .when($0027/home$0027, { templateUrl: $0027home.html$0027, controller: $0027StudentController$0027 }) .when($0027/viewStudents$0027, { templateUrl: $0027viewStudents. html$0027, controlador: $0027StudentController$0027 }) .otherwise({ redirectTo: $0027/home$0027 });});mainApp.controller($0027StudentController$0027, function($scope) { $scope.students = [ {nombre: $0027Mark Waugh$0027, ciudad:$0027Nueva York$0027}, {nombre: $0027Steve Jonathan$0027, ciudad:$0027Londres$0027}, {nombre: $0027John Marcus$0027, ciudad:$0027Paris$0027} ]; $scope.message = "Haga clic en el hipervínculo para ver la lista de estudiantes";});

Por ejemplo, si la URL es como https://www.journaldev.com/index.html#/home, la parte de la URL después del # coincide con /home, cargará la página home.html y si coincide con /viewStudents entonces cargará viewStudents.html en la página del shell. Si nada coincide, entonces irá en otra condición y la página será redirigida a home.html.

Ahora podemos crear nuestras vistas y guardarlas como archivos home.html y viewStudents.html.

home.html

<div <h2; Welcome </h2;p;};{{{message}}</p;}; View Students List</a>/div;};

Esta es la página por defecto de nuestra aplicación. En esta vista, sólo imprimimos el mensaje, que ya hemos inicializado en el StudentController . También puedes ver un enlace a la página viewStudents.

viewStudents.html

<div <h2; View Students </h2; Search: <br/> <input type="text" ng-model="name" /> <br/> <ul> li ng-repeat="student in students | filter:name"{{{{nombre.del.estudiante}} , {{{calle.estudiante}}</li> </ul...; 

; Back</a>/div…

En la vista anterior, puede ver una lista de estudiantes con una opción de búsqueda.

Finalmente, siga los siguientes pasos para completar nuestra solicitud de ejemplo de enrutamiento de AngularJS.

• ng-app auto-bootstraps nuestra aplicación mainApp
• La directiva ngView es el marcador de posición de las vistas – home.html y viewStudents.html
• Incluya las minúsculas angulares y las minúsculas de ruta angular
• Incluya los main.js que hemos creado en los pasos anteriores.
• Guarda el archivo como index.html

index.html

&<! DOCTYPE html;<html;html;head lang="en"> <meta charset="utf-8">title=;AngularJS Routing</title;html;/head; cuerpo="body"; www.jp-javascript="mainApp"; www.ng-view="ng-view"; www.div ng-app="mainApp"; www.ng-view="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 de AngularJS. Nuestra aplicación está lista para funcionar.

Ejecute su aplicación

• Guarda todos los archivos en el mismo directorio.
• abra index.html desde su navegador
• Pruebe nuestra demostración en línea.

Ejemplo de enrutamiento de AngularJS Demostración en línea