AngularJS ng-view con ejemplo

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

En AngularJS, las vistas permiten que una página cambie su contenido en lugar de navegar a otra página, lo que hace que una aplicación de una sola página se sienta instantánea. La directiva ng-view marca la región que cada ruta reemplaza con su propia plantilla y controlador.

  • 🪟 Marcador de posición único: Un elemento que lleva ng-view marca donde se inyecta cada plantilla enrutada, y solo se permite un elemento de este tipo por página.
  • 🔗 Emparejamiento de rutas: Cada ruta especifica una plantilla (templateUrl) y un controlador, vinculando así el marcado y la lógica para esa vista.
  • 📦 Dependencia del módulo: Las vistas requieren angular-route.js más una dependencia declarada del módulo ngRoute.
  • 🎯 Vista predeterminada: La cláusula "de lo contrario" redirige cualquier dirección que no coincida, que es lo que genera una vista en la primera carga.
  • 🌐 Servidor necesario: Las plantillas se obtienen a través de HTTP, por lo que la página debe servirse en lugar de abrirse desde el sistema de archivos.
  • ⚠️ Estado del soporte: AngularJS llegó al final de su ciclo de vida el 31 de diciembre de 2021 y ya no recibe más parches de seguridad.
Descubre más

Directiva ng-view de AngularJS

Sitios conocidos como Gmail Se utiliza el concepto de aplicaciones de una sola página (SPA). Cuando un usuario solicita una página diferente, la aplicación no la redirige; muestra la vista de la nueva página dentro de la página existente, de modo que el usuario tiene la sensación de que nunca se ha marchado. Lo mismo se logra en AngularJS mediante vistas y rutas.

⚠️ Aviso de soporte: AngularJS alcanzó fin de vida el 31 de diciembre de 2021 y no recibe más parches ni correcciones de seguridad. La directiva que aparece a continuación sigue siendo válida para el mantenimiento de aplicaciones AngularJS 1.x existentes; en versiones modernas Angular el equivalente es <router-outlet>.

¿Qué es una vista?

Una vista es el contenido que se muestra al usuario. Sea lo que sea que el usuario quiera ver, se mostrará la vista correspondiente de la aplicación.

La combinación de vistas y rutas divide una aplicación en vistas lógicas y vincula cada una a una controlador, lo que hace que la aplicación sea más manejable.

Imaginemos una aplicación de pedidos en la que un cliente puede ver sus pedidos y realizar otros nuevos. El siguiente diagrama muestra cómo se convierte en una aplicación de una sola página.

¿Qué es una vista?

En lugar de dos páginas web separadas, una para “Ver pedidos” y otra para “Nuevos pedidos”, AngularJS utiliza dos vistas en la misma página, a las que se accede a través de dos enlaces de referencia, #show y #new:

  • Navegando a MyApp/#show Muestra la vista "Ver pedidos" sin salir de la página. Solo se actualiza esa sección de la página actual.
  • Navegando a MyApp/#new Hace lo mismo para la vista de Nuevos Pedidos.

Separar una aplicación en vistas de esta manera la hace manejable y fácil de modificar, y cada vista tiene un controlador correspondiente que contiene la lógica de negocio para esa función.

Directiva ng-view en AngularJS

El ngVer Directivas complementa el $route servicio mediante la inclusión de la plantilla renderizada de la ruta actual en el archivo de diseño principal, normalmente index.html.

Cada vez que cambia la ruta actual, la vista incluida cambia con ella según la $route configuración, sin que la página se recargue. Rutas Estos temas se tratan por separado; aquí nos centramos en añadir múltiples vistas.

El diagrama de flujo que aparece a continuación muestra todo el proceso, que el ejemplo describe paso a paso.

Directiva ng-view en AngularJS

Cómo implementar ng-view en AngularJS

Este ejemplo presenta dos opciones al usuario: mostrar un evento y agregar un evento. Al hacer clic Agregar un evento muestra la vista Agregar evento, y lo mismo se aplica a Mostrar evento.

Paso 1) Incluye el archivo angular-route como referencia de script. Este archivo es necesario para usar múltiples rutas y vistas, y está disponible en el sitio web de AngularJS.

Incluya el archivo angular-route

Paso 2) Agrega las etiquetas href y la etiqueta div.

  1. Agregue etiquetas href que enlacen a “Agregar nuevo evento” y “Mostrar evento”.
  2. Agregue un div que contenga el ng-view Directiva para marcar la región de visualización. La vista correspondiente se inserta allí cada vez que se hace clic en cualquiera de los enlaces.

Agregar etiquetas href y etiqueta div

Paso 3) En la etiqueta de script de AngularJS, agregue la configuración de enrutamiento.

  1. Cuando el usuario hace clic en el Nuevo evento enlace, AngularJS carga add_event.html, inyecta su marcado en la vista y utiliza AddEventController para la lógica de negocio.
  2. Cuando el usuario hace clic en el Mostrar evento enlace, carga show_event.html y utiliza ShowDisplayController.
  3. El otherwise Esta cláusula establece la vista predeterminada que se muestra al usuario, que en este caso es DisplayEvent.

Configuración de enrutamiento

Paso 4) Agregue controladores para procesar la lógica de negocio de ambas funciones. Cada uno simplemente establece un mensaje en su objeto de ámbito, que se muestra cuando se visualiza la vista correspondiente.

Agregar controladores

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>
</head>
<body ng-app="sampleApp">

<h1>Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#!/NewEvent">Add New Event</a></li>
        <li><a href="#!/DisplayEvent">Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp', ["ngRoute"]);

    app.config(function($routeProvider) {
        $routeProvider
            .when("/NewEvent", {
                templateUrl: "add_event.html",
                controller: "AddEventController"
            })
            .when("/DisplayEvent", {
                templateUrl: "show_event.html",
                controller: "ShowDisplayController"
            })
            .otherwise({
                redirectTo: '/DisplayEvent'
            });
    });

    app.controller("AddEventController", function($scope) {
        $scope.message = "This is to Add a new Event";
    });

    app.controller("ShowDisplayController", function($scope) {
        $scope.message = "This is to display an Event";
    });
</script>

</body>
</html>

⚠️ Tres correcciones al listado original. Primero, los enlaces leen #!NewEvent sin barra mientras que las rutas se declaran como /NewEvent, por lo que nada coincidió. Desde AngularJS 1.6, el prefijo hash predeterminado es !, lo que hace que la dirección sea correcta #!/NewEvent — una barra después del signo de exclamación. Segundo, ShowDisplayController establecer el mensaje en “Esto es mostrar un evento”, faltando la palabra a que el texto circundante cita. Tercero, lib/bootstrap.js Se cargó desde una ruta relativa que no lleva a ninguna parte y nunca se utiliza, por lo que se ha eliminado.

ARTÍCULOS RELACIONADOS

Paso 5) Crear las páginas add_event.html y show_event.htmlCada uno contiene un encabezado y una expresión que muestra el mensaje inyectado por su controlador.

  • agregar_evento.html

agregar_evento.html

<h2>Add New Event</h2>

{{message}}
  • mostrar_evento.html

mostrar_evento.html

<h2>Show Event</h2>

{{message}}

Si el código se ejecuta correctamente, se muestra la siguiente salida en el navegador.

Salida:

Salida de ng-view

Salida de ng-view

Errores comunes de ng-view y cómo solucionarlos

Casi todos los fallos de ng-view se deben al cableado del módulo, al formato de la dirección o a la forma en que se sirve la página, y no a la directiva en sí.

  • La región de visualización permanece vacía: <font dir="auto" style="vertical-align: inherit;">las </font> ngRoute El módulo no figuraba como dependencia, o angular-route.js no se cargó. Ambos son necesarios, y el script debe ir después angular.min.js.
  • Los enlaces cambian la dirección, pero no se muestra nada: El href no coincide con la ruta. Desde AngularJS 1.6 la dirección necesita #!/Route; código antiguo escrito para la versión 1.5 utilizado #/Route.
  • Las plantillas no se cargan debido a un error CORS: La página se abrió directamente desde el disco. Sírvela a través de HTTP, porque templateUrl Se obtiene mediante una solicitud AJAX, el protocolo de archivos bloquea.
  • Solo se muestra la última vista: Más de un elemento lleva ng-view. AngularJS respeta una única región de vista por página.
  • No aparece nada en la primera carga: no otherwise La cláusula está configurada, por lo que una dirección vacía no coincide con ninguna ruta.

Preguntas Frecuentes

No. ngRoute admite una única región de vista por página. Para varias regiones con nombre a la vez, utilice la biblioteca ui-router, que proporciona ui-view y admite vistas anidadas y hermanas.

Habilitar el modo HTML5 con $locationProvider.html5Mode(true) y agregar una etiqueta base. El servidor debe entonces redirigir las rutas desconocidas a index.html; de lo contrario, al actualizar la página se devolverá un error 404.

En gran parte. AI Las herramientas convierten las tablas de rutas en matrices de rutas de Angular y reemplazan ng-view por router-outlet. Los controladores aún deben reescribirse manualmente como componentes.

Los asistentes de IA comprueban rápidamente los tres sospechosos habituales: una dependencia ngRoute faltante, un prefijo hash que no coincide con la ruta y una ruta de plantilla que el navegador no puede obtener.

Sí. Añadir un resolve Bloquea la ruta. AngularJS espera a que esas promesas se resuelvan antes de instanciar el controlador, lo que evita que la vista parpadee vacía mientras llegan los datos.

Resumir este post con: