Angular

Everis Centers
Marzo 2018
Gonzalo Saravia

1
 Angular

Introducción

Angular (comúnmente llamado "Angular 2+" o "Angular 2"), es un framework para

aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por
Google, que se utiliza para crear y mantener aplicaciones web de una sola
página. Su objetivo es aumentar las aplicaciones basadas en navegador con
capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el
desarrollo y las pruebas sean más fáciles.

La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadas

adicionales, entonces obedece a las directivas de los atributos personalizados, y
une las piezas de entrada o salida de la página a un modelo representado por las
variables estándar de JavaScript.

Angular se basa en clases tipo "Componentes", cuyas propiedades son las usada
para hacer el binding de lo datos. En dichas clases tenemos propiedades
(variables) y métodos (funciones a llamar).
Angular

Introducción
Angular

Introducción

Principales características

1. Generación de código: Angular convierte tu código en codigo altamente optimizado

para VM javascript de hoy en dia.
2. Universal: Ejecuta la primiera vista de tu aplicación en node.js, .NET, php para
renderizar de forma casi instantánea obteniendo solo html y css.
3. División de código: las app se cargan rápidamente gracias al nuevo enrutador de
componentes
4. Plantillas: permite crear rápidamente vistas de interfaz de usuario con una sintaxis
simple de potente
5. Angular CLI: herramienta de línea de comando que permite empezar a desarrollar
rápidamente
6. IDESs: sugerencia inteligente en la mayoría de los editores más populares.
Angular

Entorno de trabajo - Resumen

1.- Instalar node.js

2.- Instalar angular cli

3.- Instalar visual code

4.- Crear una aplicación “Hola mundo”

5.- Iniciar la aplicación

6.- Hacer cambios pequeños

Angular

Entorno de trabajo - instalación

Para este sencillo ejemplo vamos a usar Angular CLI tool que nos permitirá acelerar el
desarrollo

1.- Instalar nodo.js y un npm package manager (https://nodejs.org)

2.- Actualizar npm:  npm install –g npm@latest
 npm cache clean –force
 npm set audit false
3.- instalar Angular CLI:
- abrir una terminal / consola cmd
 npm install –g @angular/cli (command line interface)
4.- Ahora creamos la carpeta de trabajo y el proyecto inicial en la carpeta “C:\angularBeca5”
 cd C:\angularBeca5
 ng new hola-mundo
Con el punto 4 Angular CLI creará todo lo necesario, tendremos:
a.- Un nuevo workspace
b.- Un esqueleto de aplicación llamada hola-mundo (src)
c.- Un proyecto end-to-end (e2e)
d.- Archivos de configuración necesarios
Angular

Entorno de trabajo – abrir proyecto

Angular ya incluye un servidor, esto hace muy sencillo iniciarlo localmente

1.- Por línea de comando ir a nuestra aplicación: (consola cmd)

 cd hola-mundo
 code . lanza visual studio code (previa instalación)
3.- Abrir dos terminales dentro de visual studio.
4.- Lanzar el servidor usando el comando:
 ng serve -o

El servidor se detiene con ctrl + c

Este comando lanza el servidor, muestra los archivos y recompila si estos son
modificados, se puede ver en el navegador http://localhost:4200/
Angular

Entorno de trabajo

1.- Realiza un pequeño cambio

Los componentes son fundamentales en la construcción de aplicaciones angular,

muestran datos, escuchan y realizan acciones en base a las entradas

1.- ./src/app/app.component.ts
2.- Cambiar la propiedad title por otra frase  Verificar el cambio en el navegador
Angular

Entorno de trabajo

1.- Crear nuevo componente

1.- desde una consola de comando

- ng g c <nombre_componente>

Como se puede ver se han creado 4 archivos y actualizado 1: Revisar

Angular

Editar el nuevo componente

1.- lista.component.ts
- @component es un decorador que especifica la metadata de angular para el
componente.
- selector: Etiqueta del componente
- templateUrl: html del componente
- styleUrls: css del componente
3.- lista.component.ts  agregar un atributo
- link = “link de interés”;
4.- en lista.component.html borrar todo y crear una lista en html.
5.- agregar el selector a app.component.ts
Angular

¿Qué hay con el FrontEnd?

Hoy en día se espera que una página web se pueda ver bien en un pc y también en
un celular o Tablet.
• Responsivo: se adapta al dispositivo y permite leer cualquier texto sin hacer zom
• Separación de capas: Modelo MVC
• Two-way-data-binding: continua sincronización.

Hoy en día también se espera que el

front solo presente y recoja datos,
toda la lógica es delegada al backed

También es deseable tener una

aplicación móvil, para Android y para
IOS
Angular

¿Por qué angular?

Es el framework por defecto hoy en día, ya que cumple con prácticamente todo lo
que se espera.

• Velocidad
• Optimización: nuestro código al pasar producción es altamente optimizado.
• Universal: todo es HTML, CSS y javascrips, compatible con todos los
navegadores.
• División: el enrutador de componentes hace una división automática de
código y solo carga lo necesario de la vista.

• Productividad:
• Plantillas: permite crear vistas de usuario rápidamente.
• Angular CLI: agiliza en desarrollo por una interfaz de comando
• IDEs: Sugerencia inteligente y detección de errores.
Angular

Metamodelo Angular

Al igual que el backend en angular se puede definir un meta modelo para tener un
desarrollo ordenado y entendible por todos.

sitio Sitio: Aquí va toda la configuración, el

index.html, etc.
app.component: Es el componente principal,
app.component aquí solo debería estar en la estructura general
Component Component: Son lo componentes propios
Html creados según nuestras necesidades
Html: Estructura de nuestro component.
CSS CSS: vista y diseño de nuestro componente
TS TS: comportamiento de nuestro componente.

Se usa principalmente para comunicación con

Service
el exterior.
Angular

TypeScript

TypeScript es un lenguaje de programación libre y de código abierto desarrollado y

mantenido por Microsoft. Es un superconjunto de JavaScript, que esencialmente añade
tipado estático y objetos basados en clases.

TypeScript extiende la sintaxis de JavaScript, por tanto cualquier código JavaScript

existente debería funcionar sin problemas. Está pensado para grandes proyectos, los
cuales a través de un compilador de TypeScript se traducen a código JavaScript original

El sistema de tipos de datos en Typescript realiza una formalización de los tipos de

Javascript, mediante una representación estática de sus tipos dinámicos. Esto permite a
los desarrolladores definir variables y funciones tipadas sin perder la esencia de
Javascript.
Angular

TypeScript

Además de los tipos String y Number admite los siguientes tipos básicos:

• Boolean: tipo de dato lógico que representa verdadero o falso.

• Array: tipo de dato estructurado que permite almacenar una colección de elementos.
• Tuple: similar al array, pero con un número fijo de elementos escritos.
• Enum: representa al tipo enumeración.
• Any: indica que la variable puede ser de cualquier tipo. Es muy útil a la hora de
trabajar con librerías externas.
• Void: indica que una función no devolverá ningún valor.
• Never: este tipo representa el tipo de valores que nunca se producen.
Angular

TypeScript

Algunos ejemplo de código:

javaScript

typeScript
Angular

TypeScript

Algunos ejemplo de código:

Corresponde a una interfaz en typeScript, luego esta puede acceder a sus

atributos mediante punto y puede ser pasada a las funciones
Angular

TypeScript

Algunos ejemplo de código:

También pueden definirse clases con constructores como en los otros lenguajes
Angular

Ejercicio

Crear un nuevo workspace y proyecto

angular: site - <escuela> - <clinica>
Angular

Ejercicio

1.- Hacer algunos cambios.

- títulos
- css general
2.- Este ejercicio crearemos una
estructura típica de una página web
• Header
• Footer
• Menu (izquierda)
• News (derecha)
Angular

Ejercicio

Comenzamos creando la estructura

para nuestro sitio, es decir el html.
1.- Creamos todos los componentes
generales
• Header: >ng g c header
• Footer: …
• Menu: …
• News: …

2.- Agregamos las etiquetas en el

lugar correspondiente.
Angular

Ejercicio

1.- Para la parte central de nuestra pagina crearemos un componente nuevo

- ng g c persona
2.- Ahora creamos una clase typeScript

3.- Dibujamos un formulario en el html de personas

4.- Agregando binding

Para que funcione el binding debemos importar formsModule en app.medule.ts

Angular

Routing

En angular es una buena practica el enrutador en un modulo separado, que se dedica

al routing, por convención tendrá en nombre app-routing

ng generate module app-routing --flat --module=app  (Si no existe aun)

En app.routing.module.ts debemos agregar

En app.component.html debemos tener el router dentro de nuestro main

Angular

Ejercicio - guiado
1.- Ahora implementamos nuestro menú
• Creamos clase Menú
• Creamos un Mock de menú

2.- Iterando un arreglo en Angular

Variable en ts Método en ts
Angular

Ejercicio - guiado

Actividad: Crear el componente login e incluir en el routing

Angular

Servicios

Cada vez que deseamos agregar algo lo lógica o necesitemos acceder a un recurso
externo, debemos crear un servicio.
- > ng g s persona

En el archivo ts generado vamos a consumir el microservicio persona y vamos a crear

nuevas personas.
Angular

Routing

Actividad: Crear una pantalla para detalle de persona, con los mismos
campos y agregarla al Routing

Actividad: Después de guardar a la persona navegar al detalle

Angular

Introducción a Ionic

Es un SDK completo de código abierto para el desarrollo de aplicaciones móviles

hibridas.
• Está basada en Angular
• Utiliza tecnologías web (CSS, HTML5, Sass)
• Se puede compilar con tecnología web y luego distribuirse a través de tiendas.
• Un único código fuente sirve para Android e IOS
Angular

Introducción a Ionic

Es un SDK completo de código abierto para el desarrollo de aplicaciones moviles

hibridas.
• Está basada en Angular
• Utiliza tecnologías web (CSS, HTML5, Sass)
• Se puede compilar con tecnología web y luego distribuirse a través de tiendas.
• Un único código fuente sirve para Android e IOS

1. Instala Ionic 2. Iniciar nuestra primera app

• npm install –g ionic • ionic start app1 blank
• ionic start app2 tabs
• Ionic start app3 sidemenu
3. Arrancar la app 4. Distribuir la app
• Ionic serve • npm install -g cordova
• ionic cordova build android
Angular

Introducción a Ionic

Podemos crear una pantalla de inicio de sesión con etiquetas ionic

Angular

Introducción a Ionic

Podemos usar firebase, una plataforma de google para aplicaciones web y moviles que
nos provee varios servicios, como por ejemplo autenticación.

> npm install @angular/fire firebase --save

1.- Configurar en plataforma google 1.- Crear servicio auth: ionic g s auth
2.- Configurar environment en IONIC 2.- Agregar login register y logout
Angular

Evaluación
Crear un nuevo componente en angular y reemplazarla por el menú
1. Componente listará todas las persona que entregue el microservicio “/all”
2. Al hacer click en el nombre mostrará el detalle de la persona pero llamando al
microservicio de datos.

Detalle de persona
Jorge Parra Username: jparra

Juan Perez Nombre Completo: Jorge Parra

… Dirección: Temuco
.
Edad: 30.
…
Editar
Angular

Tecnologías idóneas

Cuando creamos una arquitectura, debemos asegurarnos que las tecnologías son
idóneas, que se comuniquen y tengan la mejor compatibilidad posible.

No Java + tomcat
Asíncrono
bloqueante
bloqueante
Webflux + netty
Angular

Postgres MongoDB
Para aprovechar correctamente la tecnología
debemos asegurarnos que sean compatibles y
compartan características.
Angular

Fin

GRACIAS