ANGULAR

¿Qué es?

 Esuna plataforma que facilita la creación de

aplicaciones con la web.
 Permite
combinar plantillas declarativas, inyección
de dependencia, herramientas de extremo a
extremo y mejores prácticas integradas.
 Permite a los desarrolladores crear aplicaciones
que se ejecutan en la web, el dispositivo móvil o el
escritorio.
 Evolución
(2013) Angular4
2009 marzo
AngularJs 2017

Angular2 Angular 5
TypeScript Octubre
del 2017
 Características
 Gestos móviles
 Animaciones
 Enrutamiento
 Vinculación de datos
 Seguridad
 Componentes de interfaz de
usuario
 Inyección de dependencias
 Ventajas
 EsteFramework es extremadamente modular,
ligero y fácil de aprender.
 Permite el mejoramiento al mantenimiento de
aplicaciones.
 Es el mejor Framework para el desarrollo FrontEnd
 Ahorro en costos, cumple con el open source.
 Pasos Instalación
Se debe instalar Node.js
 Se instala el componente CLI Angular
Creación aplicación
 Ejecución
 Seingresa en la carpeta y se
ejecuta el siguiente comando

http://localhost:4200/
Interfaz
src
 Componentes angulares

 AppComponent planilla HTML el que

permite mostrar datos y es la raíz que
se convierte en un árbol de componentes

app/app.component.
{ts,html,css,spec.ts}
 Cambiar el título de la
 Se ingresa a la aplicación
carpeta src/app
 app.component.ts el código de clase
componente, escrito en TypeScript.

 app.component.html la plantilla del

componente, escrita en HTML.

 app.component.css los estilos de CSS

privados del componente.
En app.component.ts se modifica
la propiedad tittle
Agregar estilos de aplicación

Se agrega el contenido a style.css

 Componente
 Segenera un componente llamado
heroes

src/app/heroes/
 HeroesCompon
ent.ts

Elemento CSS del

componente
la ubicación del archivo de
laplantilla
ubicación de los estilos de CSS
privados del componente

Realizar
inicializaciones
Agregar una propiedad hero
 Se agrega hero propiedad al HeroesComponent heroe
llamado Windstorm

 Mostrar héroe
Se abre el archivo heroes.component.html y se reemplaza con
un enlace de datos a la nueva hero propiedad.
 Mostrar la vista HeroesComponent
Asíque agrega un
<app-heroes> elemento al AppComponent archivo de la plantilla, justo
debajo del título
Crear una clase  hero

Contiene el id
y el nombre
En la clase HeroesComponent.ts se debe importar la clase
hero inicializarlo con la id y el nombre
Mostrar el objeto héroe

El enlace en la plantilla para anunciar el

nombre del héroe y mostrar ambos id y
name en un diseño de detalles
 
Formato de enlace con UppercasePipe

 Modificar heroes.component.html
 La palabra Uppercase en el enlace de
interpolación, va después del operador de tubería
(|)
 Las tuberías son una buena forma de formatear
cadenas, cantidades de moneda, fechas y otros
datos de visualización
 bidireccional

[(ngModel)] es la sintaxis de enlace de datos

bidireccional de Angular
 AppModule

 El decorador más importante anota la clase

AppModule de nivel superior ngModule
 CLI angular genera una AppModule clase
src/app/app.module.ts
 app.module.ts se importa el FormsModule
símbolo de la @angular/forms biblioteca.
 Seagrega FormsModule a la matriz de metadatos ,
que contiene una lista de módulos externos que la
aplicación necesita.
 Declarar componente heroes
 Cadacomponente debe declararse en un
NgModule, en la ruta src/app/app.module.ts
se importa HeroesComponent
lista de héroes
 Secrea un archivo llamado mock-heroes.ts en
en la ruta src/app/mock-heroes.ts.
 Se define una constante
HEROES como una matriz
de diez héroes.
 Mostrar héroe

Se importa Heroes de la clase mock-heroes.ts

HeroesComponent.html

*ngFor se
utiliza porque
repite el
elemento host
para cada
elemento en
una lista
Estilos
Agregar un enlace de evento de
clic

Cuando el usuario hace clic en <li>, Angular ejecuta la

onSelect(hero)expresión.
Agregar el manejador de
eventos click

Cambio
nombre de
hero a,
selectedHe
ro
 Estilo del héroe
seleccionado
 Para identificar el héroe seleccionado
 Bibliografía
https://angular.io/tutorial/toh-
pt1