Angular 2 Book

8/16/2019 Angular 2 Book

1/27


2/27

0

1

2

3

4

5

6

7

7.1

7.2

8

9

10

11

1212.1

12.2

13

14

14.1

15

15.1

16

17

Tabla de contenido

Introducción

¿Por qué Angular 2?

Prerequisitos

Enviorement

Dependencias

Arquitectura

TypeScript

Components

Lif ecycle

Styles

Templates

Data Binding

Directives

Pipes

RoutingResolve

ui-r outer

Http

Services

Firebase

RxJS

Observables

Forms

Tests

Angular 2 Book

2


3/27

Angular 2

Este libro se basa en la recopilación de información adquirida de diferentes fuentes (libros,

tutoriales, experiencia personal) sobre Angualar 2. Es más un libro personal que con

intención de difusión, pero si en el futuro le sirve a alguién me sentería agradecido si se

recomienda el link y se comparte.

Contenido del libro

El contenido será en castellano con la salvedad de los títulos, palabras que no tenga

sentido traducir o conectos de Angular/TypesScript que serán en inglés.

Esto facilita la búsqueda de información por internet. Dejando únicamente la explicación de

los conceptos en castellano.

Por supuesto muchas veces dentro del contenido se mezclarán terminos en inglés con

explicaciones en castellano.

Cabe destacar que el contenido está actualmente endesarrollo y seguirá así. Quiero que sea una fuente viva

y que vaya evolucinando con las nuevas versiones deAngular.

Notas

De ahora en adelante cuando hablemos de Angular nosestaremos refieriendo únicamente a Angular 2.

Código

Los contenidos de código se identificará así:

// app.component.ts

import {Component} from 'angular2/core';

@Component({

selector: 'my-app'

})

export class AppComponent {}

Angular 2 Book

3Introducción


4/27

Todos los códigos que se incluyan estarán probados y se adjuntará la versión de Angular

con los que se han desarrollado.

Opcionalmente si el ejemplo lo necesita se añadirá un link hacía un editor online tipo:

plunker , jsbin, jsfiddle, etc.

Enlaces

Y los links hacia la fuente original o de ampliación de información así:

Página oficial de Angular

Erratas

Pido disculpa de antemano por las posibles faltas de ortografía que intentaré sean lamínimas posibles. De todas formas se realizará una revisión de textos y códigos cada cierto

tiempo.

Cualquier error o amplicaición de contenido lo podéis notificar a través de mi cuenta de

github.

Licencia

El contenido del libro se encuentra bajo licencia MIT.

Angular 2 Book

4Introducción

https://es.wikipedia.org/wiki/Licencia_MIThttps://github.com/rldonahttps://angular.io/https://jsfiddle.net/https://jsbin.com/?html,outputhttps://plnkr.co/


5/27

¿Por qué Angular 2?

Ventajas de Angular 2 con respecto a Angular 1.x1. Contruido para ser rápido

2. Código moderno

3. API simplificada

4. Mejora la productividad

Angular 2 Book

5¿Por qué Angular 2?


6/27

Prerequisitos

Los conocociemientos necesarios para empezar a trabajar con Angular 2 son los siguientes:

Requerido

JavaScript

HTML5

CSS3

Ayuda

Conceptos de Orientación a objetos

Familiarizado con Java, C++ o C#

No requerido

Experiencia previa con Angular 1.x

Experiencia previa con TypeScript

Angular 2 Book

6Prerequisitos


7/27

Enviorement

La instalación del entorno de trabajo se basará únicamente en sistemas linux/mac. La

diferencia para usuario windows no suele ser muy disitinta.

Instalar: node.js + npm

Angular 2 Book

7Enviorement


8/27

Dependencias

Listado de depencias de un proyecto Angular 2.

Angular 2 Book

8Dependencias


9/27

Arquitectura

Una app de Angular 2 está basada en components

Una arquitectura de ejemplo de una app con Angular 2

Angular 2 Book

9 Arquitectura


10/27

TypeScript

¿Por qué TypeScript?Es un lenguaje Open Source

Es un superset de JavaScript

Transpila a JavaScript nativo

Fuertemente tipado

Orientación a objetos basado en clases (Java, C#, C++...)

Editores

Visual Studio

Visual Studio Code

WebStorm

Atom + package

Eclipse

Características:

Interfaces

Inheritance

Modules

Angular 2 Book

10TypeScript

https://www.jetbrains.com/webstorm/https://code.visualstudio.com/https://code.visualstudio.com/https://eclipse.org/https://atom.io/packages/atom-typescripthttps://atom.io/https://www.jetbrains.com/webstorm/https://code.visualstudio.com/https://www.visualstudio.com/


11/27

Components

Angular 2 está basado en componentes. Su estructurabásica es la siguiente

Angular 2 Book

11Components


12/27

Lifecycle

El ciclo de vida de un componente

Angular 2 Book

12Lifecycle


13/27

Styles

¿Cómo añadir estilos CSS a lo template de un component ?

Angular 2 Book

13Styles


14/27

Templates

template

templateUrl

Angular 2 Book

14Templates


15/27

Data Binding

Formas de rederizado y comunuicación entre un component y su template.

Angular 2 Book

15Data Binding


16/27

Directives

Básicamente son components sin template.

Angular 2 Book

16Directives


17/27

Pipes

En Angular 1.x eran conocidos por filters.

Angular 2 Book

17Pipes


18/27

Routing

¿Cómo se realiza la navegación en una app de Angular 2 ?

Angular 2 Book

18Routing


19/27

Resolve

¿Cómo realizar navegación entre templates con el los datos previamente cargados?

Angular 2 Book

19Resolve


20/27

ui-router

¿Tenemos disponible ui-router en Angular 2 ?

¿Tiene sentido?

Existe una versión aplha

https://github.com/angular-ui/ui-router/tags

Angular 2 Book

20ui-router

https://github.com/angular-ui/ui-router/tags


21/27

Http

Recuperando datos a través de Http.

Angular 2 Book

21Http


22/27

Services

Creando servicios para organizar las llamadas Http y como realizar la injección de dichos

servicios.

Angular 2 Book

22Services


23/27

Firebase

¿Cómo integrar Firebase con Angular 2 ?

Angular 2 Book

23Firebase


24/27

RxJS

Angular 2 Book

24RxJS


25/27

Observables

¿Cómo se comunican los components?

Angular 2 Book

25Observables


26/27

Forms

En el desarrollo web los formularios son complicados.

¿Cómo funcionan los formularios en Angular?

Angular 2 Book

26Forms


27/27

Tests

Los tests hoy en día son imprecindibles para el desarrollo de software.

Cómo testear una app Angular con:

Karma

Jasmine

Angular 2 Book

Angular 2 Book

Documents

Transcript of Angular 2 Book