Angular

Introducción
Angular
Introducción a Angular
● TypeScript
● Herramientas de desarrollo
● Componentes
● Templates
● Composición de componentes
● Cliente REST e inyección de dependencias
● Servicios
● Aplicaciones multipágina: Router
● Librerías de componentes
● Conclusiones
Introducción a angular
● La última tendencia en el desarrollo web es la implementación de
aplicaciones web SPA
● Las web SPA son clientes completos implementados con HTML,
CSS y JavaScript que se comunican con el servidor web con API REST
● Existen frameworks especialmente diseñados para implementar
webs SPA
● Uno de los frameworks más usados es Angular
● Acaba de publicarse la versión 4
Angular
● Angular es un framework para desarrollo SPA
● Permite extender el HTML con etiquetas propias
● Con aspecto personalizado (HTML, CSS)
● Con comportamiento personalizado (JavaScript)
● Interfaz basado en componentes (no en páginas)
● Se recomienda usar con TypeScript (aunque se puede con ES5 y
ES6)
● Inyección de dependencias
Angular vs Angular 1
● Está implementado desde cero, no como una evolución de Angular
1
● angular no es compatible con Angular 1
● La documentación de Angular 1 no sirve para angular

Por ejemplo no hay $scope y otros componentes y directivas similares

Lenguaje programación angular
● angular tiene soporte oficial para desarrollo de apps con
JavaScript (ES5 y ES6) y TypeScript
● Se puede usar cualquier lenguaje que transpile a JavaScript
Funcionalidades de angular
● Inyección de dependencias
● Servicios
● Cliente http (APIs REST)
● Navegación por la app (Router)
● Animaciones
● Internacionalización
● Soporte para tests unitarios y e2e
● Librerías de componentes: Material Design
● Renderizado en el servidor
● ...
Typescript
Características
● Añade tipos estáticos a JavaScript ES6
● Inferencia de tipos (no hay que declararlos en muchos sitios)
● Tipos opcionales (si no quieres, no los usas)
● El compilador genera código JavaScript ES5 (compatible con los
navegadores web actuales)
● Orientado a Objetos con clases (no como ES5)
● Anotaciones
Ventajas frente a JavaScript
● Con el tipado estático el compilador puede verificar la corrección
de muchas más cosas que con el tipado dinámico
● Los programas grandes son menos propensos a errores
● Los IDEs y editores pueden: Autocompletar, Refactorizar, Navegar
a la definición, etc….
● Muy parecido a Java y C#
Facilidad de adopción para JavaScripters
● Los tipos son opcionales
● La inferencia de tipos permite no tener que escribir los tipos
constantemente
● En realidad es JavaScript con más cosas, así que todo lo conocido
se puede aplicar
● Un mismo proyecto puede combinar JS y TS, lo que facilita migrar
un proyecto existente
▪Instalar TypeScript
npm install -g typescript
▪Esto descargará e instalará el compilador.
▪Una vez terminado, puedes probar que funciona escribiendo en tu terminal tsc -
v para revisar la versión y que todo funcione correctamente:
tsc -v
Version 2.1.4
▪ Cuando escribimos código en TypeScript generalmente lo
haremos en ficheros con extensión .ts (en vez de .js).
Para convertir un fichero TypeScript a su homólogo en JavaScript tendremos que escribir lo siguiente:
$ tsc fichero.ts
Esto cogerá el archivo con nombre fichero.ts y lo convertirá en fichero.js.

▪Instalar TypeScript
▪ El navegador no es capaz de entender estos ficheros y necesita
traducirlos primero a JavaScript.
▪ La compilación se puede realizar de varias formas:
▪ En el terminal, usando tsc.
▪ Usando un gestor de tareas de JavaScript como Grunt o Gulp.
▪ A través de algunos IDEs como WebStorm o Visual Studio.
▪ Para convertir un fichero TypeScript a su homólogo en
JavaScript tendremos que escribir lo siguiente:
$ tsc fichero.ts
Esto cogerá el archivo con nombre fichero.ts y lo convertirá en fichero.js.
▪Configurando TypeScript con tsconfig.json
▪ Habitualmente usaremos una serie de opciones para todos nuestros
proyectos para lo que podemos crear un fichero tsconfig.json con las opciones
que necesitemos.
▪Podemos hacerlo manualmente pero TypeScript nos ofrece un comando
para hacerlo:
tsc --init
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false
}
}
▪Tipos
▪ Uno de los usos más comunes de TypeScript es el tipado estático.
▪ Esto implica que se pueden declarar los tipos de las variables y el compilador
se asegurará de que no se usan tipos de datos erróneos.
var pagina: string = 'funcion'; // Cadena
var numero: number = 13; // Número
▪ Si se omite el tipo, TypeScript intentará detectar el tipo por el código.
var pagina = 'funcion'; // Cadena
var numero = 13; // Número
▪Tipos
▪ number - Todos los tipos de valores numéricos. Enteros, Flotantes, Hexadecimal,
Octal. Todos valen.
▪ string - Cadenas de caracteres, tenemos las ' comillas simples, " comillas dobles y las
``` tildes para las plantillas de ES6.
▪ boolean - true o false.
▪ any - Este tipo permite cualquier tipo de datos en cualquier momento ya que el valor
puede venir de un contenido dinámico o de una librería. Es muy útil para comenzar
poco a poco con TypeScript ya que el compilador ignorará esta variable.
▪ void - Este es el opuesto a any y es básicamente la ausencia de valor. Se usa para
definir que una función no devuelve nada. Si lo usas en una variable no tendrá
mucho sentido ya que solo podrá ser null o undefined.
▪ Array - Para las matrices. Tiene dos sintaxis posibles matriz: string[] o matriz:
Array<string>. De esta forma indicamos que la variable es una matriz que contiene
cadenas de caracteres.
▪Interfaces
▪ Las interfaces se usan para revisar si un objeto o clase cumplen con una cierta
estructura.
▪ Cuando definimos una interfaz, establecemos un contrato en el que decimos
que cualquier clase o variable que implementen la interfaz, tienen que tener
esas variables y/o métodos.
Entornos de Trabajo
Primeros pasos
Angular con un editor
● Es posible desarrollar aplicaciones angular nicamente
con un editor y un servidor web (p.e. brackets)
● Inconvenientes
◦ El código tarda más en cargarse y en ejecutarse
◦ Notificación de errores mucho más limitada
◦ Sin autocompletar ni navegación entre los elementos del
código
Instalación node.js y npm
● Para usar las herramientas de desarrollo de Angular es
necesario instalar node.js 6 o superior, dependiendo de la
versión
● Instalación windows y mac
● Instalación linux
● Ubuntu
◦ https://nodejs.org/en/download/stable/
◦ https://nodejs.org/en/download/package-manager/
◦ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
◦ sudo apt-get install -y nodejs
◦ sudo apt-get install -y nodejs-legacy
Construcción de proyectos / empaquetado
● Existen muchas herramientas para procesar los fuentes
de la aplicación
● Objetivos:
◦ Reducción del tiempo de descarga
◦ Preprocesadores CSS
◦ Optimización del código, CSS, HTML
◦ Cumplimiento de estilos y generación de JavaScript
Generación de código esqueleto
● No se suele crear un proyecto desde cero porque hay
muchos ficheros y carpetas que son muy parecidos en
todos los proyectos
● Existen muchos enfoques para conseguir el esqueleto
inicial de una web SPA
● Nos centraremos en los específicos para Angular
Angular-CLI
● Generación de código esqueleto
● Herramienta oficial de gestión de proyectos
● https://github.com/angular/angular-cli
● Ofrece comandos para:
◦ Generación del proyecto inicial
◦ Generación de los distintos componentes
◦ Modo desarrollo con compilado automático de TypeScript y
actualización del navegador
◦ Construcción del proyecto para distribución (build)
https://cli.angular.io/
Generación del proyecto
● Se descargarán 250Mb de Internet y se configurarán las
herramientas. Puede tardar bastante tiempo.

ng new ejem1
cd ejem1
Herramienta oficial angular-cli
● Ejecutar servidor web en modo desarrollo
● Se iniciará un servidor web en http://localhost:4200
● Hay que abrir el navegador para ejecutar la app
● Al guardar un fichero fuente, la aplicación se recargará
automáticamente
● El código TypeScript que transpilará a JavaScript
automáticamente
● En Windows es mejor ejecutar el comando como
administrador para que vaya más rápido
ng serve
❑Estructura
❑E2e: Testing end to end
❑dist: Recursos que hay que publicar en el
servidor web
❑node_modules: Librerías y herramientas
descargadas
❑src: Fuentes de la aplicación
❑package.json: Configuración de librerías y
herramientas
• src/app:● Carpeta que contiene los ficheros
fuente principales de la aplicación.
• main.ts: Fichero principal de la aplicación.
No es necesario modificarle
● favicon.ico: Icono de la aplicación
● index.html: Página principal.
● tsconfig.json: Configuración del
compilador TS
Optimización de espacio en disco
● Para tener varias aplicaciones, podemos copiar la
carpeta main completa y cambiar los ficheros de
src\app
● La carpeta node_modules ocupa unos 250Mb,
pero es la misma para todas las aplicaciones
● La podemos compartir entre apps si está en la
carpeta padre de todas las apps
● NPM busca los paquetes en la carpeta actual o en
las carpetas padre
Arquitectura
•El framework consta de varias bibliotecas,
algunas de ellas básicas y algunas
opcionales.
•Se escriben aplicaciones angular mediante
plantillas HTML con marcadores angular,
creando componentes para gestionar esas
plantillas, y añadiendo lógica de aplicación y
servicios.
•A continuación, se inicia la aplicación
mediante el bootstrapping del módulo raíz.
▪Módulos
▪Las aplicaciones Angular son modulares y Angular
tiene su propio sistema de modularidad llamado
módulos Angular o NgModules.
▪Cada aplicación Angular tiene al menos una clase de
módulo Angular, el módulo raíz, denominado
convencionalmente AppModule.
▪Aunque el módulo raíz puede ser el único módulo
en una pequeña aplicación, la mayoría de las
aplicaciones tienen muchos más módulos de
funciones
▪Un módulo Angular, ya sea un root u otro , es una
clase con un decorador @NgModule.
▪NgModule es un decorador que tiene un solo objeto de metadatos
cuyas propiedades describen el módulo.
▪Las propiedades más importantes son:
▪Declarations - las clases de vista que pertenecen a este módulo. Angular
tiene tres tipos de clases de vista: componentes, directivas y tuberías.
▪Exports: el subconjunto de declaraciones que deben ser visibles y utilizables
en las plantillas de componentes de otros módulos.
▪Imports - otros módulos cuyas clases exportadas son necesarias para las
plantillas de componentes declaradas en este módulo.
▪Providers – Servicios que se vuelven accesibles en todas las partes de la
aplicación.
▪Bootstrap: la vista principal de la aplicación, llamada el componente root,
que aloja todas las demás vistas de la aplicación. Sólo el módulo raíz debe
establecer esta propiedad bootstrap.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
▪Normalmente usamos el main.ts para realizar el arranque de nuestra aplicación
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-
browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
▪Módulos angular vs. módulos JavaScript
▪El módulo angular - una clase decorada con @ NgModule - es una
característica fundamental de Angular.
▪JavaScript también tiene su propio sistema de módulos para administrar
colecciones de objetos JavaScript. Es completamente diferente y no está
relacionado con el sistema de módulos angular.
▪En JavaScript cada archivo es un módulo y todos los objetos definidos en el
archivo pertenecen a ese módulo.
▪El módulo declara que algunos objetos son públicos marcándolos con la
palabra clave de exportación.
▪Otros módulos JavaScript usan instrucciones de importación para acceder a
objetos públicos de otros módulos.
▪Componentes
▪Un componente controla un trozo de pantalla llamado vista.
▪Define la lógica de la aplicación de un componente, lo que hace para
soportar la vista, dentro de una clase.
▪La clase interactúa con la vista a través de una API de propiedades y
métodos.
▪Angular crea, actualiza y destruye componentes a medida que el
usuario se mueve a través de la aplicación.
▪La aplicación puede actuar en cada momento de este ciclo de vida
mediante “lifecycle hooks” opcionales, como por ejemplos ngOnInit ().
▪Componentes
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-ejemplo1',
templateUrl: './ejemplo1.component.html',
styleUrls: ['./ejemplo1.component.css']

})
export class Ejemplo1Component implements OnInit {

constructor() { }

ngOnInit() {
}

}
▪Plantillas
▪ La vista de un componente se define con su plantilla complementaria.
▪Una plantilla es un HTML que indica a Angular cómo renderizar el
componente.
▪Una plantilla es como un HTML normal, a excepción de algunas
diferencias.
▪Plantillas
<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>

<ul>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>

<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

▪Metadata
▪Metadata le dice a Angular cómo procesar una clase.
▪ Si miramos en el código de un componente, se puede ver que es sólo
una clase.
▪No hay evidencia de "Angular“ o framework en absoluto.
▪De hecho, Ejemplo1Component es realmente sólo una clase. No es un
componente hasta que se lo indicas a Angular.
▪Para decirle a Angular que Ejemplo1Component es un componente, hay
que indicarlo en los mettadatos a la clase.
▪En TypeScript, se adjuntan metadatos utilizando un decorador.
▪Metadata
@Component({
selector: 'app-ejemplo1',
templateUrl: './ejemplo1.component.html',
styleUrls: ['./ejemplo1.component.css’],
providers: [ HolaService ]
})
export class Ejemplo1Component implements OnInit {

constructor() { }

ngOnInit() {
}

}
▪Metadata
▪Estas son algunas de las opciones de configuración de
@Component más útiles:
▪ Selector: selector CSS que le dice a Angular que cree e inserte
una instancia de este componente donde encuentre una
etiqueta <TAG> en el HTML principal.
▪ Por ejemplo, si el HTML de una aplicación contiene < app-
ejemplo1> </ app-ejemplo1>, Angular inserta una instancia de
la vista Ejemplo1Component entre esas etiquetas.
▪ TemplateUrl: dirección relativa al módulo de la plantilla HTML de
este componente.
▪ Providers: matriz de proveedores que se implementan mediante
nyección de dependencia para los servicios que el componente
requiere. Esta es una manera de decirle a Angular que el
constructor del componente requiere un HolaService para que
pueda obtener un saludo.
▪DataBinding
▪Sin un marco, seríamos responsable de poner los
valores de datos en los controles HTML y convertir las
respuestas de los usuarios en acciones y
actualizaciones
▪Angular soporta DataBinding, un mecanismo para
coordinar partes de una plantilla con partes de un
componente.
▪Añadir “Binging MarkUp” a la plantilla de HTML para
decir a Angular cómo conectar ambos lados.
▪Como muestra el diagrama, existen cuatro formas de
sintaxis de vinculación de datos. Cada forma tiene una
dirección - hacia el DOM, desde el DOM, o en ambas
direcciones.
▪DataBinding. Ejemplos
<li>{{empleado.nombre}}</li>
<h3 [innerText]=“empleado.nombre"></h3>
<li (click)="selectedEmpleado(empleado)"></li>

▪interpolación {{empleado.nombre}} ise visualiza la propiedad

empleado.nombre dentro del elemento <li>.
▪El binding de propiedad innerText se rellena con el valor del nombre del
empleado.
▪El evento (click) permite indicar la selección de un element dentro de
la lista.
▪Two-way data binding es el ultimo tipo de
DataBinding soportado por Angular.
▪Combina los binding de Propiedad y Evento en una
sola anotación
▪Se utiliza la directive NgModel.
<input [(ngModel)]="hero.name">
▪En un two-way binding, una propiedad va del
componente al “input box” como un binding de
propiedad. Cuando el usuario cambia algo el dato se
refleja en el componente, de forma similar al event
binding.
▪Angular procesa todos los data bindings una vez por
ciclo de eventos de JavaScriptdesde el root a través
de todos los hijos.
▪Directivas
▪Las plantillas Angular son dinámicas. Cuando Angular
las renderiza, se tranforma el DOM de acuerdo a las
directrices indicadas por las directivas.
▪Una directiva es una clase con un decorador
@Directive decorator.
▪Un componente es una directia con una plantilla. Un
decorador @Component es realmente un decorador
@Directive extendido con características de plantilla.
▪Los components se estudian por separado dada su
importancia
▪Directivas
▪Hay otras dos clases de directivas:
▪Estructurales: permiten modificar, eliminar y sustiuir elementos en el DOM
<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>
▪Atributos: suelen aparecer dentro de un Element TAG al igual que los
atributos
▪ NgModel es una directiva de atributo
▪Veremos ejemplos a lo largo del curso.
▪Servicios
▪Servicio es una definición amplia que permite implementar un valor, una
función o una características que necesitamos en la aplicación
▪Casi todo puede ser un servicio. Un servicio es habitualmente una clase
con un propósito concreto y bien definido.
▪ logging service
▪ data service
▪ message bus
▪ tax calculator
▪ application configuration
▪Servicios
▪No existe nada concreto en Angular para especificar servicios. No hay una
definición concreta, ni una clase y tampoco se registran.
▪Ejemplo export class HeroService {
export class Logger { private heroes: Hero[] = [];
constructor(
log(msg: any) { console.log(msg); } private backend: BackendService,
error(msg: any) { console.error(msg); } private logger: Logger) { }
..
warn(msg: any) { console.warn(msg); } ..
}
▪El trabajo de un componmente es permitir a un usuario interactuar. Media
entre la vista y la lógica de la aplicación. Normalmente a través de data
bindings . El resto lo delega en servicios.
▪Inyección de dependencias y servicios
▪ La DI es la forma de suministrar una nueva instancia de una clase con las
dependencias necesarias. Normalmente, una dependencia es un servicio.
▪ Angular usa dependency injection para implementar nuevos components con los
servicios que se necesitan.
▪ Angular puede indicar qué servicios necesita un componente mirando en los
tipos de los parámetros del constructor.
▪Inyección de dependencias y servicios
▪ En este ejemplo, el constructor de HeroListComponent
necesita un HeroService:
constructor(private service: HeroService) { }
▪ Cuando Angular crea un componente, primero mira los
servicios que se necesitan.
▪ Un inyector maintiene un contenedor de instancias de
servicio que se han creado previamente.
▪ Si la instancia concreta no está en el contenedor el
inyector crea una y la añade antes de devolver el
servidio a Angular.
▪ Cuando todos los servicios solicitados se han resuelto,
Angular puede llamar al constructor del componente
con esos servicios como argumentos.
▪ En resumen: dependency injection.
▪Inyección de dependencias y servicios
▪Vale, todo esto es muy bonito, pero si el inyector no tiene
HeroService,¿cómo sabe crear uno?
▪Debemos haber registrado un proveedor de HeroService en el
inyector.
▪Un proveedor es algo que puede crear o devolver un servicio,
normalmente la propia clase del servicio.
▪Se pueden registrar los proveedores en módulos o componentes.
▪En general, se a´ñaden los proveedores al root module para que
los servicios estén disponibles en cualquier lado.
▪Ejemplo del proveedor HolaService
▪Ejemplo en el src/app/app.module.ts
providers: [
BackendService,
HolaService,
Logger
],
▪Ejemplo en un componente
@Component({
selector: ‘mi-componente',
templateUrl: ‘./mi-componente.component.html',
providers: [ HolaService ]
})
Modulos
▪ES (EcmaScript) Módulos
▪Los módulos EcmaScript son conocidos sencillamente
como Módulos
▪Los usamos para montar la aplicación y contienen
distintos elementos, como componentes, servicios,
valores compartidos, etc…
▪Cada fichero es un módulo y EXPORTA las cosas que
queremos que se utilicen en otros ficheros, que
pueden importarlos.
▪Módulos ES. Ejemplo
export interface Vehiculo{
id:number;
name:string;
}

export class VehiculoService

{
//
//
}

▪Se utiliza la palabra EXPORT para exportar el asset

▪Módulos ES. Ejemplo
import { Component } from '@angular/core';
import { Vehiculo,VehiculoService } from "./vehiculo";

▪Se utiliza la palabra IMPORT para importar el asset dentro

de otro fichero
▪Es una forma de “desestructuración”, usando las llaves.
▪Estamos creando una dependencia entre ficheros
▪Módulos Angular
▪Específicos de Angular. Se les conoce como módilos NgModule
▪Nos permite realizar algo que no podemos hacer con los
módulos ES.
▪Podemos organizer nuestra aplicación en bloques coherentes
a partir de funcionalidades compartidas,
▪Es decir, los usamos para agrupar por funcionalidad
▪Usamos la directiva NgModule
▪Módulos Angular
▪ Son similares a un Container.
▪ Pueden contener componentes, servicios, directivas, pipes, etc….
▪ Por ejemplo, un modulo para empleados, otro para personas, otro para
admin, etc….
▪Módulos Angular
▪Se los reconoce porque son CLASES decoradas con @NgModule
▪Con esta directiva, Angular sabe como compilar y ejecutar el
código del modulo
▪Roles de NgModule
▪ Importar otros Módulos Angular
▪ Identificar components, pipes y tuberías
▪ Exportar sus características
▪ Proveer servicios a los inyectores de Angular
▪ Podemos cargarlos de forma Lazy o Eager
▪Módulos Angular. Ejemplo de Root Angular Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { Ejemplo1Component } from './ejemplo1/ejemplo1.component’;

@NgModule({
declarations: [ Declarations: componentes,
AppComponent, directivas,pipes que vamos a usar
Ejemplo1Component
],
imports: [ Import: módulos de los que se depende
BrowserModule
], Providers: servicios para el inyector
providers: [],
bootstrap: [AppComponent]
}) Bootstrap: solo el root
export class AppModule { } module. De donde
comienza
Componentes
Componentes en angular
● Un componente es una nueva etiqueta HTML con
una vista y una lógica definidas por el desarrollador
● La vista es una plantilla (template) en HTML con
elementos especiales
● La lógica es una clase TypeScript vinculada a la
vista
▪BootStraping a Component
▪Punto de entrada para la app
▪Definido en el main.ts

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
▪BootStraping a Component