AngularJS ng-view con ejemplo: cómo implementar la vista

Hoy en día, todo el mundo habría oído hablar de las "Aplicaciones de página única". Muchos de los sitios web conocidos como Gmail Utilice el concepto de aplicaciones de página única (SPA).

SPA es el concepto en el que cuando un usuario solicita una página diferente, la aplicación no navegará a esa página, sino que mostrará la vista de la nueva página dentro de la página existente.

Le da al usuario la sensación de que nunca abandonó la página en primer lugar. Lo mismo se puede lograr en Angular con la ayuda de Vistas junto con Rutas.

En este tutorial, aprenderá-

¿Qué es una vista?

Una vista es el contenido que se muestra al usuario. Básicamente lo que el usuario quiere ver, en consecuencia se le mostrará esa vista de la aplicación.

La combinación de vistas y Rutas ayuda a dividir una aplicación en vistas lógicas y vincular diferentes vistas a los Controladores.

Dividir la aplicación en diferentes vistas y usar Enrutamiento para cargar diferentes partes de la aplicación ayuda a dividir la aplicación de manera lógica y hacerla más manejable.

Supongamos que tenemos una aplicación de pedidos en la que un cliente puede ver pedidos y realizar otros nuevos.

El siguiente diagrama y la explicación posterior demuestran cómo hacer que esta aplicación sea una aplicación de una sola página.

¿Qué es una vista?

Ahora, en lugar de tener dos páginas web diferentes, una para “Ver pedidos” y otra para “Nuevos pedidos”, en AngularJS, en su lugar crearía dos vistas diferentes llamadas "Ver pedidos" y "Nuevos pedidos" en la misma página.

También tendremos 2 enlaces de referencia en nuestra aplicación llamados #show y #new.

  • Entonces, cuando la aplicación vaya a MyApp/#show, mostrará la vista de Ver pedidos, al mismo tiempo no abandonará la página. Simplemente actualizará la sección de la página existente con la información de "Ver pedidos". Lo mismo ocurre con la vista "Nuevos pedidos".

De esta manera, resulta más sencillo separar la aplicación en diferentes vistas para hacerla más manejable y fácil de realizar cambios cuando sea necesario.

Y cada vista tendrá un controlador correspondiente para controlar la lógica empresarial de esa funcionalidad.

Directiva ng-view en AngularJS

"ngView" es una directiva que complementa el servicio $route al incluir la plantilla representada de la ruta actual en el archivo de diseño principal (index.html).

Cada vez que cambia la ruta actual, la vista incluida cambia de acuerdo con la configuración del servicio $route sin cambiar la página en sí.

estaremos cubriendo rutas en un parche de later capítulo, por ahora, nos centraremos en agregar múltiples vistas a nuestra aplicación.

A continuación se muestra el diagrama de flujo completo de cómo funciona todo el proceso. Analizaremos en detalle cada proceso en nuestro ejemplo que se muestra a continuación.

Directiva ng-view en AngularJS

Cómo implementar ng-view en AngularJS

Veamos un ejemplo de cómo podemos implementar ng-view en AngularJS. En nuestro ejemplo, vamos a presentar dos opciones al usuario,

  • Una es mostrar un "Evento" y la otra es agregar un "Evento".
  • Cuando el usuario hace clic en el enlace Agregar un evento, se le mostrará la vista "Agregar evento" y lo mismo ocurre con "Mostrar evento".

Siga los pasos a continuación para implementar este ejemplo.

Paso 1) Incluya el archivo de ruta angular como referencia de script.

Este archivo de ruta es necesario para poder hacer uso de las funcionalidades de tener múltiples rutas y vistas. Este archivo se puede descargar desde el sitio web de angularJS.

Implementar ng-view en AngularJS

Paso 2) Agregue etiquetas href y etiquetas div.

En este paso,

  1. Agregue etiquetas href que representarán enlaces a "Agregar un nuevo evento" y "Mostrar un evento".
  2. Además, agregue una etiqueta div con la directiva ng-view que representará la vista. Esto permitirá que se inserte la vista correspondiente cada vez que el usuario haga clic en "Agregar nuevo enlace de evento" o en "Mostrar enlace de evento".

Implementar ng-view en AngularJS

Paso 3) En su etiqueta de secuencia de comandos para Angular JS, agregue lo siguientewing código.

No nos preocupemos por el enrutamiento, por ahora, esto lo veremos en un later capítulo. Por ahora, veamos el código de las vistas.

  1. Esta sección de código significa que cuando el usuario hace clic en la etiqueta href, "NewEvent" que se definió anteriormente en la etiqueta div. Irá a la página web add_event.html, tomará el código de allí y lo inyectará en la vista. En segundo lugar, para procesar la lógica empresarial para esta vista, vaya a "AddEventController".
  2. Esta sección de código significa que cuando el usuario hace clic en la etiqueta href, "DisplayEvent" que se definió anteriormente en la etiqueta div. Irá a la página web show_event.html, tomará el código de allí y lo inyectará en la vista. En segundo lugar, para procesar la lógica empresarial de esta vista, vaya a "ShowDisplayController".
  3. Esta sección de código significa que la vista predeterminada que se muestra al usuario es la vista DisplayEvent.

    Implementar ng-view en AngularJS

Paso 4) Agregue controladores para procesar la lógica empresarial.

Lo siguiente es agregar controladores para procesar la lógica empresarial para las funciones "DisplayEvent" y "Add New Event".

Simplemente agregamos una variable de mensaje a cada objeto de alcance para cada controlador. Este mensaje se mostraráyed cuando se muestra la vista adecuada al usuario.

Implementar ng-view en AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.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 display an Event";

    });
</script>
</body>
</html>

Paso 5) Cree páginas llamadas add_event.html y show_event.html

A continuación, cree páginas llamadas add_event.html y show_event.html. Mantenga las páginas simples, como se muestra a continuación.

En nuestro caso, la página add_event.html tendrá una etiqueta de encabezado junto con el texto "Agregar nuevo evento" y tendrá una expresión para mostrar el mensaje "Esto es para agregar un nuevo evento".

De manera similar, la página show_event.html también tendrá una etiqueta de encabezado para contener el texto "Mostrar evento" y también tendrá una expresión de mensaje para mostrar el mensaje "Esto es para mostrar un evento".

El valor de la variable de mensaje se inyectará según el controlador adjunto a la vista.

Para cada página, agregaremos la variable de mensaje, que se inyectará desde cada controlador respectivo.

  • agregar_evento.html

Implementar ng-view en AngularJS

<h2>Add New Event</h2>

{{message}}
  • mostrar_evento.html

Implementar ng-view en AngularJS

<h2>Show Event</h2>
	
{{message}}

Si el código se ejecuta correctamente, lo siguientewing El resultado se mostrará cuando ejecute su código en el navegador.

Salida:

Implementar ng-view en AngularJS

Del resultado, podemos notar 2 cosas.

  1. La barra de direcciones reflejará cuál es la vista actual que se muestra.yed. Entonces, dado que la vista predeterminada es mostrar la pantalla Mostrar evento, la barra de direcciones muestra la dirección de "DisplayEvent".
  2. Esta sección es la Vista, que se crea sobre la marcha. Dado que la vista predeterminada es Mostrar evento, esto es lo que se muestra.yed para el usuario.

Ahora haga clic en el enlace Agregar nuevo evento en la pantalla de la página.yed. Ahora obtendrá el siguiente resultado.

Implementar ng-view en AngularJS

Salida:

  1. La barra de direcciones ahora reflejará que la vista actual es ahora la vista "Agregar nuevo evento". Tenga en cuenta que seguirá estando en la misma página de la solicitud. No se le dirigirá a una nueva página de solicitud.
  2. Esta sección es la Vista y ahora cambiará para mostrar la HTML para la funcionalidad "Agregar nuevo evento". Ahora, en esta sección se muestra la etiqueta del encabezado "Agregar nuevo evento" y el texto "Esto es para agregar un nuevo evento".yed para el usuario.