AngularJS ng-view con Ejemplo

Hoy en día, todo el mundo habría oído hablar de las “Aplicaciones de una sola página”. Muchos de los sitios web conocidos como Gmail utilizan el concepto de aplicaciones de una sola página (SPA).

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

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

En este tutorial, usted 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 esa vista de la aplicación se mostrará al usuario.

La combinación de vistas y rutas ayuda a dividir una aplicación en vistas lógicas y enlazar diferentes vistas a Controllers.

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

Supongamos que tenemos una aplicación de pedido, en la que un cliente puede ver los pedidos y colocar otros nuevos.

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

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.

  • Por lo tanto, cuando la aplicación vaya a MyApp/ #show, mostrará la vista de las órdenes de visualización, al mismo tiempo no saldrá de 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 “Pedidos nuevos”.

Entonces, de esta manera, simplemente se vuelve más simple separar la aplicación en diferentes vistas para que sea más manejable y fácil realizar cambios cuando sea necesario.

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

Directiva ng-view en AngularJS

El “ngView” es una directiva que complementa el servicio $route incluyendo la plantilla renderizada de la ruta actual en el archivo de diseño principal (index.html).

Cada vez que cambia la ruta actual, la vista incluye cambios en ella según la configuración del servicio $route sin cambiar la página misma.

Vamos a cubrir rutas en un capítulo posterior, por ahora, nos centraremos en agregar múltiples vistas a nuestra aplicación.

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

Ejemplo de ng-view

Echemos un vistazo a un ejemplo de cómo podemos implementar vistas.

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 haga clic en el enlace Agregar un evento, se le mostrará la vista de “Agregar evento” y lo mismo ocurre con “Mostrar evento”.

Por favor, siga los pasos que se indican a continuación para obtener este ejemplo en su lugar.

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

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

Paso 2) 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 la vista correspondiente se inyecte siempre que el usuario haga clic en el enlace “Agregar nuevo evento” o en el “Mostrar evento”.

Paso 3) En su etiqueta de script para Angular JS, agregue el siguiente código.

No nos preocupemos por el enrutamiento, por ahora, veremos esto en un capítulo posterior. Vamos a ver el código para las vistas por ahora.

  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, y tomará el código de allí e 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 para 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

Paso 4) A continuación es agregar controladores para procesar la lógica empresarial tanto para la funcionalidad “DisplayEvent” como “Agregar nuevo evento”.

Simplemente estamos agregando una variable de mensaje a cada objeto de alcance para cada controlador. Este mensaje se mostrará cuando se muestre la vista adecuada al usuario.

Paso 5) Crear 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 “Add New Event” y tendrá una expresión para mostrar el mensaje “This is to Add a new Event”.

Del mismo modo, la página show_event.html también tendrá una etiqueta de encabezado para contener el texto “Show Event” y también tendrá una expresión de mensaje para mostrar el mensaje “This is to display an Event”.

El valor de la variable de mensaje se inyectará en función del controlador que se adjunta a la vista.

Para cada página, vamos a añadir la variable de mensaje, que será inyectada desde cada controlador respectivo.

add_event.html

show_event.html

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida, podemos notar 2 cosas

  1. La barra de direcciones reflejará la vista actual que se muestra. Por lo tanto, 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 uno, esto es lo que se muestra al usuario.

Ahora haga clic en el enlace Agregar nuevo evento en la página mostrada. Ahora obtendrá la siguiente salida.

Salida:

  1. La barra de direcciones reflejará ahora que la vista actual es ahora la vista “Agregar nuevo evento”. Observe que seguirá estando en la misma página de aplicación. No se le dirigirá a una nueva página de aplicación.
  2. Esta sección es la Vista, y ahora cambiará para mostrar el HTML para la funcionalidad “Agregar nuevo evento”. Así que ahora en esta sección se muestra la etiqueta de encabezado “Add New Event” y el texto “This is to Add a new Event” al usuario.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *