Hasta ahora ya abarque lo básico de Angular.js en los 2 anteriores post (parte I y parte II) y en este post les quiero compartir el como funciona una aplicación completa cuando usamos Angular.js. Para esto usaré la herramienta MEAN.js que ya de forma nativa tiene acoplado nuestro Framework de Frontend.
Si recordamos el post de Node.js donde hablaba de la herramienta MEAN.js, podemos ver ahora un poco más a fondo su funcionamiento y entender así como Angular.js participa en todo el proceso del desarrollo de un sistema web.
Para instalar lo necesario le comparto aquí todos los comandos:
1 - Crear el proyecto
Al finalizar las descargas tendrán todos los archivos necesarios para correr el proyecto y podemos ejecutar el comando grunt para levantar el servidor. Veremos una página parecida a esta al acceder a la dirección localhost:3000.
Y ya entrando en la estructura del código nos daremos cuenta que lo referente a Angular.js se encontrará en la carpeta public/modules, donde cada módulo corresponde a las estructuras que tengamos. Por defecto se tienen los módulos core (base del Frontend del sistema) y users (usuarios).
2 - Manejo de sesión
Automáticamente al crear el proyecto tenemos manejo de sesión de usuarios, registro, editar perfil y cambio de contraseña. También incluye la estructura base del código para conectar nuestro usuario con las redes sociales. Para registrarnos accedemos al botón Sign Up y tendremos una página como esta:
Ingresamos nuestros datos de costumbre y ya tendremos nuestro usuario en el sistema. Al enviar este formulario contaremos con el panel de manejo de usuario:
3 - Crear un modelo
Para esta pequeña aplicación pienso hacer un mini blog donde podamos agregar Posts y para esto necesitamos crear una estructura. Es en este punto donde vemos la conección de Frontend y Backend, ya que una estructura se crea para ambos y debe existir una correcta correspondencia entre ellos. Para lograr esto usaremos una función de Yeoman para crear estructuras con el comando yo meanjs:crud-module post, donde post es el nombre de la estructura. Este nos preguntará lo siguiente:
Lo que significa crear automáticamente las carpetas correspondiente a CSS, imágenes, directivas y filtros para este módulo de Post en Angular.js. Para seleccionar y des-seleccionar usamos la barra espaciadora.
Al aceptar veremos una lista de 14 archivos creados para nuestra estructura Post.
4 - Editar un modelo
En este momento podemos ya navegar en nuestra página creando, editando y eliminando posts, pero estos únicamente tienen nombre, así que tendremos que acceder a varios archivos como mínimo para poder modificar el modelo.
Yo agregue al modelo de post el atributo content para poder simular el escrito en un post. Ahora podemos acceder a nuestro sistema nuevamente y crear posts. El formulario de creación luce de la siguiente forma:
Y si nos damos cuenta ya esta dentro de la página la validación de formularios con Angular.js. Al ser creado el post podemos verlo como se tiene en la próxima imagen:
Noten que podemos modificar y eliminar el post usando los botones azules que se tienen en la vista.
Ahora bien si nos damos cuenta, todas las páginas tienen la misma apariencia y todas cargan la misma barra de navegación. Esto se debe gracias al archivo layout.server.view.html que tenemos en la carpeta /app/views/templates, en este se importan los archivos necesarios y se modela con la estructura base de todas las vistas.
Por último podemos listar todos los post que escribamos y se vería como la siguiente imagen:
Como un ejercicio interesante se pudiese agregar el módulo Ininite Scroll para cargar posts en la lista a medida que naveguemos en la página. Para instalar un módulo podemos modificar el archivo packages.json agregar la librería de interés o instalarla manualmente con bower, un ejemplo del comando sería bower install infinite-scroll.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Accede al repositorio de este proyecto aquí.
Si recordamos el post de Node.js donde hablaba de la herramienta MEAN.js, podemos ver ahora un poco más a fondo su funcionamiento y entender así como Angular.js participa en todo el proceso del desarrollo de un sistema web.
Para instalar lo necesario le comparto aquí todos los comandos:
1 - Crear el proyecto
- Primero que nada nos posicionamos en la carpeta que deseamos tener nuestro proyecto.
- Desde la consola usamos Yeoman para crear el proyecto. Usamos el comando yo meanjs.
- Damos un nombre y descripción de la aplicación.
- Nuestro nombre como autor.
- Luego nos pregunta si queremos un modelo de artículos por defecto y por motivo de tutorial vamos a rechazarlo para poder crear modelos nosotros mismos.
- Y por último se nos pregunta que dependencias queremos usar al crear nuestro proyecto y por defecto aceptamos todas estas que se nos ofrecen.
Al finalizar las descargas tendrán todos los archivos necesarios para correr el proyecto y podemos ejecutar el comando grunt para levantar el servidor. Veremos una página parecida a esta al acceder a la dirección localhost:3000.
Y ya entrando en la estructura del código nos daremos cuenta que lo referente a Angular.js se encontrará en la carpeta public/modules, donde cada módulo corresponde a las estructuras que tengamos. Por defecto se tienen los módulos core (base del Frontend del sistema) y users (usuarios).
2 - Manejo de sesión
Automáticamente al crear el proyecto tenemos manejo de sesión de usuarios, registro, editar perfil y cambio de contraseña. También incluye la estructura base del código para conectar nuestro usuario con las redes sociales. Para registrarnos accedemos al botón Sign Up y tendremos una página como esta:
Ingresamos nuestros datos de costumbre y ya tendremos nuestro usuario en el sistema. Al enviar este formulario contaremos con el panel de manejo de usuario:
3 - Crear un modelo
Para esta pequeña aplicación pienso hacer un mini blog donde podamos agregar Posts y para esto necesitamos crear una estructura. Es en este punto donde vemos la conección de Frontend y Backend, ya que una estructura se crea para ambos y debe existir una correcta correspondencia entre ellos. Para lograr esto usaremos una función de Yeoman para crear estructuras con el comando yo meanjs:crud-module post, donde post es el nombre de la estructura. Este nos preguntará lo siguiente:
Lo que significa crear automáticamente las carpetas correspondiente a CSS, imágenes, directivas y filtros para este módulo de Post en Angular.js. Para seleccionar y des-seleccionar usamos la barra espaciadora.
Al aceptar veremos una lista de 14 archivos creados para nuestra estructura Post.
- app/controllers/posts.server.controller.js: Permite desde el Backend de la aplicación controlar las operaciones CRUD de la estructura post.
- app/models/post.server.model.js: Detalla el esquema del modelo de la estructura post.
- app/routes/posts.server.routes.js: Maneja las rutas que permiten manejar la estructura post desde el Backend.
- app/tests/post.server.model.test.js: Maneja las pruebas al modelo de la estructura post a nivel de Backend.
- app/tests/post.server.routes.test.js: Maneja las pruebas sobre las rutas a nivel de Backend.
- public/modules/posts/config/posts.client.routes.js: Permite controlar las pruebas sobre las rutas que acceden al modelo post y como beneficio no tener URLs que pretendan acceder sin permisos o con parámetros erróneos.
- public/modules/posts/controllers/posts.client.controller.js: Es el controlador a nivel de Frontend para el modelo post. Este luce como el controlador tradicional que hemos estado aprendiendo con Angular.js.
- public/modules/posts/services/posts.client.service.js: Son los servicios que tendremos para la estructura post.
- public/modules/posts/tests/posts.client.controller.test.js: Es el controlador de pruebas a nivel de Frontend.
- public/modules/posts/config/posts.client.config.js: Permite agregar todas las configuraciones de la estructura post en el Frontend. Por defecto el código te incluye las funciones para los enlaces a las funciones de listar y crear post en el modelo de Menus de la interfaz.
- public/modules/posts/views/create-post.client.view.html: Es la vista para crear un post.
- public/modules/posts/views/edit-post.client.view.html: Vista para editar un post.
- public/modules/posts/views/list-posts.client.view.html: Vista para listar todos los post en la base de datos. Este maneja por defecto lo que muestra si no hay ningún post en la lista.
- public/modules/posts/views/view-post.client.view.html: Vista para ver un único post. Este maneja por defecto que solo el creador puede editarlo o eliminarlo.
- public/modules/posts/posts.client.module.js: Este el que finalmente le dice a la aplicación que tiene el módulo post.
4 - Editar un modelo
En este momento podemos ya navegar en nuestra página creando, editando y eliminando posts, pero estos únicamente tienen nombre, así que tendremos que acceder a varios archivos como mínimo para poder modificar el modelo.
- app/models/post.server.model.js
- public/modules/posts/controllers/posts.client.controller.js
- public/modules/posts/views/create-post.client.view.html
- public/modules/posts/views/edit-post.client.view.html
- public/modules/posts/views/list-posts.client.view.html
- public/modules/posts/views/view-post.client.view.html
Yo agregue al modelo de post el atributo content para poder simular el escrito en un post. Ahora podemos acceder a nuestro sistema nuevamente y crear posts. El formulario de creación luce de la siguiente forma:
Y si nos damos cuenta ya esta dentro de la página la validación de formularios con Angular.js. Al ser creado el post podemos verlo como se tiene en la próxima imagen:
Noten que podemos modificar y eliminar el post usando los botones azules que se tienen en la vista.
Ahora bien si nos damos cuenta, todas las páginas tienen la misma apariencia y todas cargan la misma barra de navegación. Esto se debe gracias al archivo layout.server.view.html que tenemos en la carpeta /app/views/templates, en este se importan los archivos necesarios y se modela con la estructura base de todas las vistas.
Por último podemos listar todos los post que escribamos y se vería como la siguiente imagen:
Como un ejercicio interesante se pudiese agregar el módulo Ininite Scroll para cargar posts en la lista a medida que naveguemos en la página. Para instalar un módulo podemos modificar el archivo packages.json agregar la librería de interés o instalarla manualmente con bower, un ejemplo del comando sería bower install infinite-scroll.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Accede al repositorio de este proyecto aquí.
No hay comentarios:
Publicar un comentario