ANGULAR

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

ANGULAR

Cargado por

Copyright:

Formatos disponibles

ANGULAR

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

ANGULAR

Cargado por

Copyright:

Formatos disponibles

ANGULAR

 Esuna plataforma que facilita la creación de

 AppComponent planilla HTML el que

 app.component.html la plantilla del

 app.component.css los estilos de CSS

Se agrega el contenido a style.css

Elemento CSS del

El enlace en la plantilla para anunciar el

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

 El decorador más importante anota la clase

Se importa Heroes de la clase mock-heroes.ts

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

También podría gustarte