¿Cómo ejecutar un enrutamiento en el marco AngularJS?

En este artículo, aprenderemos cómo podemos realizar el enrutamiento en AngularJS, además de comprender su implementación a través del código de ejemplo.  

El enrutamiento en AngularJS ayuda a desarrollar aplicaciones de una sola página, que es una aplicación web que carga solo una página, y la parte de la página en lugar de la página completa se actualiza con cada clic del mouse. Como consecuencia de esto, las páginas se cargan más rápido que lo que garantiza un alto rendimiento y una aplicación eficiente. A medida que el usuario interactúa con la aplicación web, las páginas se actualizan dinámicamente. El usuario puede navegar a través de diferentes páginas sin recargar la página. Dado que el enrutamiento se realiza en la misma página HTML, el usuario experimentará que no ha abandonado la página. En AngularJS, el enrutamiento permite crear diferentes URL para diferentes contenidos en una aplicación web con la ayuda del módulo ngRoute y $routeProvider .

El módulo ng-route se usa para enrutar a diferentes páginas en una aplicación de una sola página, sin recargar las páginas. Cuando se especifica la URL, el motor de enrutamiento captura la URL y representa la vista de acuerdo con las reglas de enrutamiento definidas.  

El $routeProvider se puede usar para configurar las rutas y definir qué página se mostrará cuando el usuario haga clic en un enlace en particular. Acepta el método when() que se usa para especificar la nueva definición de ruta al servicio $route o el método () de lo contrario que se usa para establecer la definición de ruta para cambiar la ruta cuando no coincide ninguna definición de ruta.

Acercarse:

• Agregue una referencia a angular-route.js . Este paso es obligatorio ya que este archivo JavaScript tiene todos los módulos principales necesarios para el enrutamiento.

Sintaxis:

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js”></script>

• Cree un módulo de aplicación y especifique ngRoute como un módulo de dependencia, para que la funcionalidad de enrutamiento se pueda usar dentro de la aplicación.

Sintaxis:

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

• Configure $routeProvider para proporcionar las rutas en la aplicación mediante el método config() . Use el método $routeProvider.when(path, route) para configurar las reglas de enrutamiento. El primer parámetro es la URL de solicitud y el segundo parámetro es el objeto que contiene propiedades como controlador y plantilla. Use el método else() para redirigir a la URL base si el usuario solicita una URL diferente a las reglas configuradas.

Sintaxis:

app.config(function ($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "home.html",
    })
    .when("/tutorials", {
      templateUrl: "tutorials.html",
      controller: "tutorialsController",
    })
    .when("/courses", {
      templateUrl: "courses.html",
      controller: "coursesController",
    })
    .when("/projectideas", {
      templateUrl: "projectideas.html",
      controller: "projectideasController",
    })
    .otherwise({ redirectTo: "/" });
});

• Defina enlaces a las rutas dentro de la página HTML.

Sintaxis:

<a href="#/tutorials">Tutorials</a>

• Incluya la directiva ng-view dentro de una etiqueta div dentro de la página HTML para mostrar el contenido de la ruta elegida.

Ejemplo : en este ejemplo, hay 4 páginas para enrutar, a saber:

• página de inicio
• Página de tutoriales
• Página de cursos
• Página de ideas de proyectos

Mientras el usuario navega por estas páginas utilizando la barra de navegación, nos aseguraremos de que la página no se vuelva a cargar. En su lugar, el contenido de la página seleccionada se muestra en la misma página.

ejemplo1.html:

Esta es la página principal de la aplicación. En la etiqueta del script, se agregó una referencia a angular-route.min.js . Este archivo tiene los elementos HTML como el título «GeeksforGeeks» y la barra de navegación. En la barra de navegación, se han especificado enlaces a las rutas. También tiene una etiqueta div donde se ha especificado la directiva ng-view para que cuando el usuario seleccione una página, se pueda mostrar el contenido de esa página en particular. En la etiqueta del script, también se ha agregado  una referencia al archivo javascript.js .

<!DOCTYPE html>
<html ng-app="myApp">
 
<head>
    <title>Routing in AngularJS</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js">
    </script>
    <style>
        a {
            font-size: 25px;
            color: black;
            text-decoration: none;
            padding-right: 20px;
            padding-left: 20px;
        }
         
        nav {
            background-color: #d0dbd4;
        }
         
        h1 {
            color: #39ad64;
        }
    </style>
</head>
 
<body>
    <nav>
        <a id="active1" href="#/">Home</a>
        <a id="active2" href="#/tutorials">Tutorials</a>
        <a id="active3" href="#/courses">Courses</a>
        <a id="active4" href="#/projectideas">Project Ideas</a>
    </nav>
    <h1>GeeksforGeeks</h1>
    <div ng-view></div>
    <script type="text/javascript" src="javascript.js"></script>
</body>
</html>

javascript.js:

Este archivo javascript contiene el módulo llamado «myApp» que se crea donde el módulo ngRoute se especificó como un módulo de dependencia. Con el método config(), se ha configurado el módulo $routeProvider y se han proporcionado rutas en la aplicación. Para cada ruta se especifica su URL y controlador a utilizar. 

var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "home.html",
    })
    .when("/tutorials", {
      templateUrl: "tutorials.html",
      controller: "tutorialsController",
    })
    .when("/courses", {
      templateUrl: "courses.html",
      controller: "coursesController",
    })
    .when("/projectideas", {
      templateUrl: "projectideas.html",
      controller: "projectideasController",
    })
    .otherwise({ redirectTo: "/" });
});
app.controller("tutorialsController", function ($scope) {
  $scope.tutorials = [
    "Practice DS and Algo.",
    "Algorithms",
    "Data Structure",
    "Software Designs",
    "CS Subjects",
  ];
});
app.controller("coursesController", function ($scope) {
  $scope.courses =
  ["Live Courses",
   "Self-Paced Courses",
   "School Courses"];
});
app.controller("projectideasController", function ($scope) {
  $scope.c = [
    "Program for face detection",
    "Program for coin detection",
    "Program to blur an image",
    "Program to create a single colored blank image",
  ];
  $scope.java = [
    "A Group chat Application",
    "Generating Password and OTP in Java",
    "Creative Programming in Processing",
  ];
  $scope.python = [
    "Make a Notpad using Tkinter",
    "Color Game using Tkinter in Python",
    "Message Encode-Decode using Tkinter",
    "Twitter sentiment analysis using Python",
  ];
 
  $scope.projectideas = [
    { course: "C++", projects: $scope.c },
    { course: "Java", projects: $scope.java },
    { course: "Python", projects: $scope.python },
  ];
});

home.html: Esta página se utiliza para mostrar las diferentes opciones disponibles en la página de inicio.

<style>
    #active1 {
        background-color: #39ad64;
    }
</style>
 
<h1>Write</h1>
 
 
<p>Write articles and get featured</p>
 
 
<h1>Practice</h1>
 
 
<p>Learn and code with the best industry experts</p>
 
 
<h1>Premium</h1>
 
 
<p>Get access to ad-free content, doubt assistance and more</p>

tutorials.html: la directiva ng-repeat se usa para crear una lista de los tutoriales disponibles. Aquí, los nombres de los tutoriales se toman de la array «tutoriales» de JavaScript. Esta array se ha definido en tutorialsController en el archivo javascript.js.

<style type="text/css">
    #active2 {
        background-color: #39ad64;
    }
</style>
<h2>Tutorials</h2>
<ul ng-repeat="x in tutorials">
    <li>{{x}}</li>
</ul>

cursos.html: esta página es similar a la página de tutoriales. Aquí, la directiva ng-repeat se usa para crear una lista de los cursos. Los nombres de los cursos se tomaron de la array de JavaScript llamada «cursos» en el CourseController definido en el archivo javascript.js.

<style type="text/css">
    #active3 {
        background-color: #39ad64;
    }
</style>
<h2>Courses</h2>
<ul ng-repeat="x in courses">
    <li>{{x}}</li>
</ul>

projectideas.html: en este archivo, hemos utilizado la directiva ng-repeat para hacer la lista de ideas de proyectos. Los nombres de los proyectos se han tomado de las arrays definidas en projectideasController en el archivo javascript.js.

<style type="text/css">
    #active4 {
        background-color: #39ad64;
    }
</style>
<h2>Project Ideas</h2>
<ul ng-repeat="x in projectideas">
    <li>{{x.course}}</li>
    <ul ng-repeat="y in x.projects">
        <li>{{y}}</li>
    </ul>
</ul>

Nota : para ejecutar estos archivos, guárdelos con los mismos nombres de archivo, como se mencionó, y ejecute el archivo principal, es decir, example1.html en un servidor en vivo o en un servidor local.

Producción:

 Enrutamiento en AngularJS 

Explicación : el usuario puede navegar por diferentes páginas usando la barra de navegación. Como podemos ver en el resultado, la página no se recarga, en lugar de que todas las páginas, es decir, inicio, tutoriales, cursos, ideas de proyectos, se muestren en la misma página HTML. La barra de navegación y el encabezado no cambian. El contenido de las diferentes páginas web se muestra en la etiqueta <div> donde se usó la directiva ng-view en el archivo example1.html. Así es como funciona una aplicación de una sola página.

Nota : cuando el usuario carga la página, carga la página de inicio debido a la opción «de lo contrario» en la función $routeProvider.