Angular Apuntes

Página 1

Angular Notas

1. Que es Angular?

Angular es un framework basado en JavaScript que permite crear single page applications, que son páginas que permiten el redireccionamiento interno sobre la misma página a través del enrutador interno del Framework.

Entre las mejoras que tendrá Angular 5, están las siguientes:

AOT será el default

Chequeo de tipos en templates

Metadata más flexible

Se removerán los archivos .ngfactory.ts

Mejores mensajes de error

Mejoramiento de performance

Otras fechas de lanzamiento:

Angular 6 - Marzo de 2018

Angular 7 - Septiembre/Octubre de 2018

2. Que es TypeScript

Un Superset de JavaScript. Esto quiere decir que esta escrito en JavaScript.

Es un agregado a JavaScript, no lo reemplaza. Habrá algunas tareas que TypeScript no pueda hacer entonces JavaScript se encargará de ello.

Agrega nuevas características como:

Tipos.

Clases.

Interfaces.

TypeScript es transpilado (Lo traduce y lo compila) a Javascript.

Esto es porque la mayoría de los navegadores no entiende TypeScript. Pero sí JavaScript. Por lo cual el navegador recibirá JavaScript. El transpilado se hace de forma automática.

Diferencias entre ECMAscrpit y TypeScript:

ECMAScript o ES: Es la guia en la fue que creada Javascript en 1996 y por lo tanto cuando sacan una nueva versión de ES, Javascript lo adopta y a su vez las empresas que hacen compiladores (navegadores, node, etc).

TypeScript es un Superset de JavaScript, osea que esta escrito en JavaScript, y lo que hace es adrte mas funciones que el javascript.

Página 2

Angular Cli permite generar:

Componente -> ng g component nombre_del_componente

Directiva -> ng g directive nombre_de_la_directiva

Filtro -> ng g pipe nombre_del_filtro

Servicio -> ng g service nombre_del_servicio

Clase -> ng g class nombre_de_la_clase

Interface -> ng g interface nombre_del_interface

Enum -> ng g enum nombre_del_enum

Módulo -> ng g module nombre_del_módulo

Modulo y Componentes:

Los modulos son las piezas mas grandes en las que se puede dividir una aplicación de Angular 4, son piezas que podemos reutilizar dentro de nuestro proyecto pero también podemos usarlas en otros proyectos.

Angular nos ofrece módulos nativos como HTTP, Browser, Forms, Reactive Forms.

Página 3

Tipos de data Binding en Angular

1.string interpolation {{}} desde el typescript al html

2. Property binding [] desde el html a typescript

3. Event Binding [] de html a typescript

4. Two way data binding [()] comunicacion bidereccional entre html y typescript

String interpolation --> En el archivo tps let title:string; en el componente html {{title}}

Nota: En el constructor agregamos codigo que queremos que se ejecute al momento de cargar la clase

property binding : podemos ver que se utiliza [] entre la acción

Página 4

Event Biding: Captura eventos en HTML para ejecutar alguna funcion en TS se usa () para un evento

Página 5

two way databinding --> [(ngModel)] enlazamos una propiedad del tps y la interpolamos para mostrarla en nuestro componente

Agregar el modulo de FormsModule e importarlo en los imports.

Página 6

Que son las directivas?

contamos con tres tipos de directivas

Las directivas son una forma elegante y rápida de manipular la información, contamos con 3 tipos de directivas:

COMPONENTES: Son directivas que siempre tienen asignados templates de HTML.

ESTRUCTURALES: Nos permiten modificar el DOM, es decir manipular elementos de HTML.

ATRIBUTOS: A estas directivas les indicamos a través de HTML cómo se deben comportar de acuerdo con ciertas condiciones que definimos.

Directivas Escructurales:

Página 7

directiva ¨*ngIF -->

Página 8

Usar angular google Maps--> https://angular-maps.com/guides/getting-started/

Directivas se usan con ->- []

NGSTYLE y NGCLASS

Página 9

Creación de directivas con el comando ng g d directives/resaltar

Angular nos permite desarrollar directivas personalizadas. Es necesario manejar diferentes elementos, tales como:

@Directive: Anotación para identificar un elemento como directiva.

OnInit: Interface que es llamada cuando las propiedades de una directiva son invocadas.

ngOnInit: Función que es ejecutada al momento de llamar la directiva. Acá se coloca la lógica de negocio.

ElementRef: Clase utilizada para hacer referencia al elemento en donde se está implementando la directiva.

Renderer2: Renderiza el elemento cuando se le asigna un estilo.

Input: Tipo de metadata de entrada.

Página 10

HostListener: permiten capturar los eventos en nuestro componente.

Parámetros: evento y elemento

onClick: Función en donse se ejecuta la lógica de negocio momento de capturar el evento

Nota: La directiva fué invocada en el html sin “[]” porque no se pasan parámetros. En caso contrario es necesario colocarlos

Página 11

Host Binding nos permite editar elementos del DOM o el HTML al que esté asignado desde nuestra directiva. Recibe el atributo del HTML que queremos resaltar.

Página 12

Qué hace el router en Angular 4

El routing en Angular 4 nos permite implementar navegación en nuestra aplicación, podemos asignar vistas/componentes específicos para cada url que deseemos. Routing nos permite enviar y recibir parámetros.