Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Angular 2

No description
by

Eliseo Iniesta

on 22 February 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Angular 2

¿Que es Angular JS?
¡Manos a la obra!
Nos iniciamos en Angular JS
Tendencias Web
La última tendencia en el desarrollo Web es la implementación de aplicaciones web SPA.
Particularidades de Angular 2
Permite extender el HML con etiquetas propias (características importante).
Interfaz basada en componentes, no en páginas.
Inyección de dependencias.
Angular 2
NO es una evolución de Angular 1
, por lo tanto,
NO es compatible con Angular1
.
Angular 2 tiene soporte oficial para desarrollar apps con JavaScript (ES5 o ES6) y TypeScript aunque este framework admite el uso de cualquier otro lenguaje que transpile a JavaScript.
By: GRUPO 3
Jose Manuel Cristobal Flores
Alejandro López del Olmo
Diego Valentín Mencía
Eliseo Iniesta Abellán

¿Qué es una Web SPA?
Es una aplicación web o sitio web cuyo objetivo es el de proporcionar una experiencia de usuario similar a la de una aplicación de escritorio.

Esta tecnología permite que el sitio web se ejecute en una única página puesto que su contenido cambia en una determinada porción de la página lo que permite reutilizar, por ejemplo, el encabezado, el pie de página y los menú de navegación.
Frameworks para Webs SPA
Se trata de un framework completo para construir aplicaciones en cliente cuyo objetivo es que el peso de la lógica y el renderizado lo lleve el propio navegador, en lugar del servidor.

En esta presentación nos centraremos en Angular 2, aunque enumeraremos las diferencias que tienen más transcendencia entre Angular y Angular 2.
¡Encuentra las 7 diferencias!
1. Pasamos de controladores a componentes
2. Incorporar otros frameworks como Bootstrap
3. Cambios en las directivas estructurales
4. Cambios en Data Binding
5.
Elinación de directivas
Se han suprimido muchas de las directivas estructurales integradas en el framework en favor de asociarse directamente a propiedades y eventos estándar del HTML.
6. Servicios
En Angular 1, había muchas maneras de crear servicios:
1. Factorías
2. Servicios
3. Proveedores
4. Constantes
5. Valores
En Angular 2, sólo hay una: definir una clase Injectable
7. Inyección de dependencias
Funcionalidades de Angular 2
• Inyección de dependencias.
• Servicios.
• Cliente http (APIs REST).
• Navegación por la app (Router).
• Animaciones.
• Internacionalización.
• Soporte para test unitarios y e2e.
• Librerías de componentes: Material Design, Bootstrap...
• Renderizado en el servidor.

¿Qué es Type script?
Es un lenguaje de programación de código abierto desarrollado por Microsoft con herramientas de programación orientada a objetos.
Características de TypeScript
• Añade tipos estáticos a JavaScript ES6.
Inferencia de tipos (no hay que declararlos en muchos sitios)
Tipos opcionales (si no quieres, no lo usas)
• El compilador genera código JavaScript Es5.
• Orientado a objetos con clases (no como ES5).
• Anotaciones

Ventajas de TypeScript 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 IDs y editores pueden: Autocompletar, Refactorizar, Navegar a la definición puesto que es un lenguaje similar a C#, Java.. en este sentido.
• Es fácil para que se adapten desarrolladores de JavaScript puesto que:
Los tipos son opcionales.
La inferencia de tipos permite no tener que escribir los tipos constantentemente.
En realidad es JavaScript con más cosas, así que todo lo conocido por JavaScript se puede aplicar.
Un mismo proyecto puede combinar JS y TS, lo que facilita migrar un proyecto existente.

Ejemplo de código
¿Qué herramientas necesitamos?
-> Node JS, plataforma para ejecutar aplicaciones JS fuera del
navegador.

-> NPM, gestor de herramientas de desarrollo y librerías
JavaScript (integrado con Node JS).


-> Gestores de paquetería, como GruntJS, gulpJS, WebPack,
brocoliJS. (Los desarrolladores de Angular 2 utilizan WebPack).

¿Cómo construimos un proyecto en Angular JS?
-> A mano, menuda locura...

-> Yeoman, herramienta cuyo principal cometido es el de
crear esqueletos para aplicaciones.


-> Proyectos semilla de repositorios online, por ejemplo
GitHub.

-> Angular Cli, herramienta oficial de Agular Js para la gestión
de proyectos , herramienta por linea de comandos (la que se va a utilizar en esta explicación).
Puesta a punto del entorno
1. Instalar Node JS
.
Se deberá descargar el paquete de la página oficial de node JS e instalarlo posteriormente en el equipo.
2.Instalar módulo de TypeScript.
Para ello bastará con ejecutar el comando
npm install -g typescript
dentro del directorio C:\ (equipos windows).
3. Instalar la herramienta oficial de Angular Js, Angular - cli
.
Para ello bastará con ejecutar el comando
npm install -g angular-cli
dentro del directorio C:\ (equipos windows).
¿Funcionará?
Para comprobar que nuestro equipo está configurado correctamente para poder trabajar con Angular JS, crearemos un proyecto inicial de prueba para asegurarnos de que todo funciona bien.
1. Crear un proyecto Angular
.
Para ello bastará con ejecutar el comando
ng new <nombre_proyecto>
en el directorio que se desee.
2. Ejecutar el proyecto creado.
Para ello, una vez creado el proyecto completo, deberemos situarnos en el directorio raíz del proyecto a través de la consola de comandos y ejecutar el proyecto mediante el comando
ng serve
.
De aquí en adelante habrá que seguir siempre el mismo proceso para crear y ejecutar un proyecto Angular JS.
Componentes en Angular 2
Un componente es una nueva etiqueta HTML con una vista y una lógica definidas por el desarrollador.
La
vista
es una plantilla en HTML con elementos especiales.
La
lógica
es una clase TypeScript vinculada a la vista.

Lo que vamos a tocar principalmente es el contenido de la carpeta app.
Fichero
app.component.ts
, compone la parte lógica.
Fichero
app.component.html
, compone la parte de vista.
Estos dos ficheros están vinculados entre ellos.

Otros ficheros de proyecto:
Fichero
app.module.ts
, define los componentes de la app, el componente principal y que otros módulos necesita.
Fichero
index.ts
, en TS se pueden definir ficheros index.ts que exportan todos los ficheros de una carpeta. Eso simplifica la importación desde otros ficheros y desacopla los tipos del fichero en el que se declaran.

No es necesario que la vista y la lógica estén separadas en ficheros diferentes
. Se puede incrustar código HTML dentro del fichero
app.component.ts
usando este foromato:
`código HTML`
, estas comillas son características de ES6.

La vista del componente (HTML) se genera en función de su estado (atributos de clase).
Templates en Angular 2 (I)
Ajax en Angular 2
Los templates permiten definir la vista en función de la información del componente.
Existen muchas directivas predefinidas y podemos programar nuestras propias directivas.
Las directivas modifican a los elementos en los que se incluyen.

Las directivas estructurales empiezan por * y modifican el DOM del documento (*ngIf, *ngFor, *ngSwitch).
El * de denomina
azúcar sintáctico
y se utiliza para la definición del template.

Visualización condicional, se puede controlar si un elemento aparece o no en la página dependiendo del valor de un atributo de la clase usando la directiva
ngIf
.
Por ejemplo dependiendo del valor del atributo booleano visible.
<p *ngIf=”visible”>Texto</p>
.
También se puede usar una expresión:
<p *ngIf=”num == 3”>Num 3</p>
.

• Repetición de elementos, es posible visualizar contenido de un array con la directiva
ngFor
.
Con esta directiva se define cómo de visualizará cada elemento.
<div *ngFor=”let elem of elems”>{{elem.desc}}</div>




No se pueden incluir 2 directivas estructurales de tipo * en el mismo elemento. De manera que el código que se muestra a continuación estaría mal:


La solución correcta seria:

Array
elems=[{desc: ‘Elem1’, check: true},
{ desc: ‘Elem2’, check: true}
{ desc: ‘Elem3’, check: false}]
Resultado
<div>Elem1</div>
<div>Elem2</div>
<div>Elem3</div>
Templates en Angular 2 (II)
<li *ngFor=”let elem of elems” *ngIf=”elem.check”>
{{elem.desc}}</li>
<template ngFor let.elem [ngForOf]=”elems”>
<li *ngIf=”elem.check”>{{elem.desc}}</li>
</template>
Estilos, los estilos en HTML son por defecto globales.
Existen varias formas de definir un CSS en Angular2.
1. Globalmente asociado al index.html, se pone la referencia en el head del html al archivo CSS.
Con angular-cli, si creamos un fichero src/styles.css se incluirá de forma automática en el index.html.
2. Local al componente:
a. En la propiedad styles o styleUrls de @ Component
Algunos ejemplos podrían ser los siguientes:



Es importante tener en cuenta que no se puede usar
styles
y
styleUrls
a la vez.

b. En el template, un ejemplo podría ser el siguiente:



Hay muchas formas de controlar los estilos de los elementos:
Asociar la clase de un elemento a un atributo de tipo string.
Cambiando el valor del atributo se cambia la clase del elemento.
Por ejemplo, la clase del elemento h1 se cambia modificando el atributo de
className
.


Activar una clase concreta con un atributo boolean, esto se puede usar para una o varias clases, estos son algunos ejmplos:


@Component({
Selector: ‘app-root’,
templateUrl : ‘./app.component.html’,
styles: [‘ .red { color: red; }
.blue { color: blue; }
‘]
})
export class AppComponent {
}
@Component({
selector: ‘app’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
Export calss AppComponent{

}
<style>
.orange {
color: orange;
}
</style>

<h1 [class]=”className”>Hola {{name}}!</h1>

<button (click)=”setClass(‘blue’)”>Blue</button>

<h1 [class]=”className”>Title!</h1>
<h1 [class.red]=”redActive”>Title!</h1>
<h1 [class.red]=”redActive”
[class.yellow]=”yellowActive”>Title!</h1>
Templates en Angular 2 (III)
Asociar la clase de un elemento a un atributo de tipo mapa (objeto) de string a boolean, para gestionar varias clases es mejor usar un mapa de string (nombre de la clase) a boolean (activa o no).

Asociar un estilo concreto de un elemento a un atributo.
Existen 2 maneras de hacerlo:
En algunos casos es mejor cambiar el estilo directamente en el elemento:


Con unidades:


Usando mapas (objetos) de propiedad a valor:



Formularios
, existen varias formas de controlar formularios en Angular 2:
Acceso a los controles desde el código para leer y modificar su estado  Un elemento del template puede asociarse a un variable. Podemos usar esa variable en el código del template para manejar ese elemento.

Vincular un control del formulario a un atributo del componente (
data binding
).
Algunos ejemplos pueden ser los siguientes:
Campo de texto, se vincula el control a un atributo del componente con [(
ngModel
)]. Cualquier cambio en el control se refleja en el valor del atributo (y viceversa).



Checkbox basado en booleanos, cada control se asocia con [(
ngModel
)] a un atributo booleano, de su valor dependerá de si está “checked”.



Radiobutton, todos los botones del mismo grupo se asocian al mismo atributo con [(
ngModel
)]. El valor del atributo es el “value” del control.

<p [ngClass] = “pClasses”>Text</p>
pClasses = {
“red”: false,
“bold”: true
}
changeParagraph(){
this.pClasses.bold = true;
}
<p [style.backgroundColor]=”pColor”>Text</p>
<p [style.fontSize.em]=”pSizeEm”>Text</p>
<p [style.fontSize.%]=”pSizePerc”>Text</p>
<p [ngStyle]=”getStyles()”>Text</p>

getStyles(){
return {
‘font-style’: this.canSave? ‘italic’: ‘normal’,
‘font-weight’: ¡this.isUnchanged? ‘bold’: ‘normal’,
‘font-size’: this.isSpecial? ‘24px’: ‘8px’
}
}
<input type=”text” [(ngModel)]=”name”>
<p>{{name}}</p>

name:string
<input type=”checkbox” [(ngModel)]=”angular”/>
Angular
<input type=”checkbox” [(ngModel)]=”javascript”/>
JavaScript


angular:boolean
javascript:boolean

<input #cityInput type=”text”>

<button (click)=”update(cityInput.value); cityInput.value=’’ ”>
Update city
</button>
<input type=”radio” name=”gender” [(ngModel)]=”gender” value=”Male”> Male

<input type=”radio” name=”gender” [(ngModel)]=”gender” value=”Female”> Female


gender:string
Gracias al módulo Http que nos proporciona Angular 2, podemos realizar todo tipo de peticiones a servidores.
Siguiendo con los principios de la arquitectura REST , angular 2 implementa de manera sencilla las peticiones POST, GET, PUT y DELETE. recibiendo como habitualmente las respuesta en formato JSON.
Angular también permite el envío y procesado de mensajes SOAP.
Ejemplo de petición GET a WS con Angular 2
Sin parámetros
Con parámetros
Ejemplo de petición POST a WS con Angular 2
Pasos para poder implementar una llamada Ajax
1º) Importamos el siguiente js en nuestro index.html
Este script nos permitirá poder utilizar el módulo http.
2º) Importar el provider de Http en el main.ts
3º) Importar Http en nuestro componente
JQuery en Angular 2
Para poder utilizar JQuery en Angular hay que hacer algo de "tampas" puesto que TypeScript es un lenguaje fuertemente tipado, lo que puede ocasionar algunos errores de sintaxis.

Algunos elementos que pueden provocar estos errores de sintaxis son los $ típicos de Jquery.

1º Importar librería en el archivo index.html bien por CDN o descargándola de la página oficial.
2º Declarar en el archivo .ts como variables los siguientes elementos: jQuery, $, value.


3º Implementar código JQuery.





Data binding
Es la sincronización de los datos del modelo con la vista.
Angular nos abstrae de la lógica de push/pull para el uso de inserciones y actualización de datos en HTML.
Two-Way binding
Consiste en el envio bi-direccional de los datos.
Combina el event-binding y el property-binding de tal manera que permite utilizar el resultado de un evento dado con el fin de alterar el HTML.
Event binding
Permite enlazar eventos a etiquetas de HTML.
Los eventos tratan la información directamente desde el programa.
Property binding
Consiste en asignar un valor de una variable a un atributo de una etiqueta HTML (src, alt, etc…)
También permite utilizar propiedades CSS
Interpolación
Consiste en mostrar el valor de una variable especificada entre los caracteres {{ }}.
Es one-way binding es decir es unidireccional al envío de datos del core al DOM (no se puede modificar el valor de la variable desde el DOM)
Full transcript