PDF de programación - Angular 2 Book

Angular 2 Book

Tabla de contenido

Introducción
¿Por qué Angular 2?
Prerequisitos
Enviorement
Dependencias
Arquitectura
TypeScript
Components
Lifecycle
Styles
Templates
Data Binding
Directives
Pipes
Routing

Resolve
ui-router

Http
Services

Firebase

RxJS

Observables

Forms
Tests

0
1
2
3
4
5
6
7
7.1
7.2
8
9
10
11
12
12.1
12.2
13
14
14.1
15
15.1
16
17

2

Angular 2 Book

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 en
desarrollo y seguirá así. Quiero que sea una fuente viva
y que vaya evolucinando con las nuevas versiones de
Angular.

Notas

De ahora en adelante cuando hablemos de Angular nos
estaremos 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 {}

Introducción

3

Angular 2 Book

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 la
mí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.

Introducción

4

Angular 2 Book

¿Por qué Angular 2?
Ventajas de Angular 2 con respecto a Angular 1.x

1. Contruido para ser rápido
2. Código moderno
3. API simplificada
4. Mejora la productividad

¿Por qué Angular 2?

5

Angular 2 Book

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

Prerequisitos

6

Angular 2 Book

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

Enviorement

7

Angular 2 Book

Dependencias

Listado de depencias de un proyecto Angular 2.

Dependencias

8

Angular 2 Book

Arquitectura
Una app de Angular 2 está basada en components

Una arquitectura de ejemplo de una app con Angular 2

Arquitectura

9

Angular 2 Book

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

TypeScript

10

Angular 2 Book

Components
Angular 2 está basado en componentes. Su estructura
básica es la siguiente

Components

11

Angular 2 Book

Lifecycle
El ciclo de vida de un componente

Lifecycle

12

Angular 2 Book

Styles

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

Styles

13

Angular 2 Book

Templates

template
templateUrl

Templates

14

Angular 2 Book

Data Binding

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

Data Binding

15

Angular 2 Book

Directives

Básicamente son components sin template.

Directives

16

Angular 2 Book

Pipes

En Angular 1.x eran conocidos por filters.

Pipes

17

Angular 2 Book

Routing

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

Routing

18

Angular 2 Book

Resolve

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

Resolve

19

Angular 2 Book

ui-router

¿Tenemos disponible ui-router en Angular 2?
¿Tiene sentido?

Existe una versión aplha

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

ui-router

20

Angular 2 Book

Http

Recuperando datos a través de Http.

Http

21

Angular 2 Book

Services

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

Services

22

Angular 2 Book

Firebase

¿Cómo integrar Firebase con Angular 2?

Firebase

23

Angular 2 Book

RxJS

RxJS

24

Angular 2 Book

Observables

¿Cómo se comunican los components?

Observables

25

Angular 2 Book

Forms

En el desarrollo web los formularios son complicados.

¿Cómo funcionan los formularios en Angular?

Forms

26

Angular 2 Book

Tests

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

Cómo testear una app Angular con:

Karma
Jasmine

Tests

27