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 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.
Da la sensación al usuario 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?
- Directiva ng-view en AngularJS
- Ejemplo de ng-view
¿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 le mostrará al usuario.
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 el 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 nuevos.
El siguiente diagrama y la explicación subsiguiente demuestran cómo hacer que esta aplicación sea 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, 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 que 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, es más sencillo separar la aplicación en diferentes vistas para que sea 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
El "ngView" es una directiva que complementa el servicio $ route al incluir 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 de acuerdo con la configuración del servicio $ route sin cambiar la página en sí.
Cubriremos rutas en un capítulo posterior, 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.
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,
- Uno es mostrar un "evento" y el otro es agregar un "evento".
- Cuando el usuario hace clic en el enlace Agregar un evento, se le mostrará la vista para "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 hacer uso de las funcionalidades de tener múltiples rutas y vistas. Este archivo se puede descargar del sitio web de angularJS.
Paso 2) En este paso,
- Agregue etiquetas href que representarán enlaces a "Agregar un nuevo evento" y "Mostrar un evento".
- Además, agregue una etiqueta div con la directiva ng-view que representará la vista.
Esto permitirá que se inyecte la vista correspondiente cada vez que el usuario haga clic en el "vínculo Agregar nuevo evento" o en el "vínculo 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, lo veremos en un capítulo posterior. Veamos el código de las vistas por ahora.
- 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 de esta vista, vaya a "AddEventController".
- 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".
- 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, se agregan controladores para procesar la lógica empresarial de las funciones "DisplayEvent" y "Add New Event".
Simplemente estamos agregando una variable de mensaje a cada objeto de alcance para cada controlador. Este mensaje se mostrará cuando se muestre al usuario la vista correspondiente.
Event Registration Guru99 Global Event
Paso 5) 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á en función del controlador que se adjunta a la vista.
Para cada página, vamos a agregar la variable de mensaje, que se inyectará desde cada controlador respectivo.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida, podemos notar 2 cosas
- La barra de direcciones reflejará cuál es la vista actual que se muestra. Entonces, dado que la vista predeterminada es mostrar la pantalla Mostrar evento, la barra de direcciones muestra la dirección de "DisplayEvent".
- 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 al usuario.
Ahora haga clic en el enlace Agregar nuevo evento en la página que se muestra. Ahora obtendrá la siguiente salida.
Producción:
- La barra de direcciones ahora reflejará que la vista actual es ahora la vista "Agregar nuevo evento". Tenga en cuenta que seguirá en la misma página de la aplicación. No se le dirigirá a una nueva página de aplicación.
- 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 al usuario la etiqueta de encabezado "Agregar nuevo evento" y el texto "Esto es para agregar un nuevo evento".
