Angular

2 Book

Tabla de contenido
Introduccin

Por qu Angular 2?

Prerequisitos

Enviorement

Dependencias

Arquitectura

TypeScript

Components

Lifecycle

7.1

Styles

7.2

Templates

Data Binding

Directives

10

Pipes

11

Routing

12

Resolve

12.1

ui-router

12.2

Http

13

Services

14

Firebase
RxJS
Observables

14.1
15
15.1

Forms

16

Tests

17

Angular 2 Book

Angular 2
Este libro se basa en la recopilacin de informacin adquirida de diferentes fuentes (libros,
tutoriales, experiencia personal) sobre Angualar 2. Es ms un libro personal que con
intencin de difusin, pero si en el futuro le sirve a alguin me sentera agradecido si se
recomienda el link y se comparte.

Contenido del libro

El contenido ser en castellano con la salvedad de los ttulos, palabras que no tenga
sentido traducir o conectos de Angular/TypesScript que sern en ingls.
Esto facilita la bsqueda de informacin por internet. Dejando nicamente la explicacin de
los conceptos en castellano.
Por supuesto muchas veces dentro del contenido se mezclarn terminos en ingls 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.
Cdigo
Los contenidos de cdigo se identificar as:
// app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app'
})
export class AppComponent {}

Introduccin

Angular 2 Book

Todos los cdigos que se incluyan estarn probados y se adjuntar la versin de Angular
con los que se han desarrollado.
Opcionalmente si el ejemplo lo necesita se aadir un link haca un editor online tipo:
plunker, jsbin, jsfiddle, etc.

Enlaces
Y los links hacia la fuente original o de ampliacin de informacin as:
Pgina oficial de Angular

Erratas
Pido disculpa de antemano por las posibles faltas de ortografa que intentar sean la
mnimas posibles. De todas formas se realizar una revisin de textos y cdigos cada cierto
tiempo.
Cualquier error o amplicaicin de contenido lo podis notificar a travs de mi cuenta de
github.

Licencia
El contenido del libro se encuentra bajo licencia MIT.

Introduccin

Angular 2 Book

Por qu Angular 2?
Ventajas de Angular 2 con respecto a Angular 1.x
1. Contruido para ser rpido
2. Cdigo moderno
3. API simplificada
4. Mejora la productividad

Por qu Angular 2?

Angular 2 Book

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

Requerido
JavaScript
HTML5
CSS3

Ayuda
Conceptos de Orientacin a objetos
Familiarizado con Java, C++ o C#

No requerido
Experiencia previa con Angular 1.x
Experiencia previa con TypeScript

Prerequisitos

Angular 2 Book

Enviorement
La instalacin 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

Angular 2 Book

Dependencias
Listado de depencias de un proyecto Angular 2.

Dependencias

Angular 2 Book

Arquitectura
Una app de Angular 2 est basada en components

Una arquitectura de ejemplo de una app con Angular 2

Arquitectura

Angular 2 Book

TypeScript
Por qu TypeScript?
Es un lenguaje Open Source
Es un superset de JavaScript
Transpila a JavaScript nativo
Fuertemente tipado
Orientacin a objetos basado en clases (Java, C#, C++...)

Editores
Visual Studio
Visual Studio Code
WebStorm
Atom + package
Eclipse

Caractersticas:
Interfaces
Inheritance
Modules

TypeScript

10

Angular 2 Book

Components
Angular 2 est basado en componentes. Su estructura
bsica es la siguiente

Components

11

Angular 2 Book

Lifecycle
El ciclo de vida de un componente

Lifecycle

12

Angular 2 Book

Styles
Cmo aadir 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 comunuicacin entre un component y su template.

Data Binding

15

Angular 2 Book

Directives
Bsicamente son components sin template.

Directives

16

Angular 2 Book

Pipes
En Angular 1.x eran conocidos por filters.

Pipes

17

Angular 2 Book

Routing
Cmo se realiza la navegacin en una app de Angular 2?

Routing

18

Angular 2 Book

Resolve
Cmo realizar navegacin 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 versin aplha

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

ui-router

20

Angular 2 Book

Http
Recuperando datos a travs de Http.

Http

21

Angular 2 Book

Services
Creando servicios para organizar las llamadas Http y como realizar la injeccin de dichos
servicios.

Services

22

Angular 2 Book

Firebase
Cmo integrar Firebase con Angular 2?

Firebase

23

Angular 2 Book

RxJS

RxJS

24

Angular 2 Book

Observables
Cmo se comunican los components?

Observables

25

Angular 2 Book

Forms
En el desarrollo web los formularios son complicados.
Cmo funcionan los formularios en Angular?

Forms

26

Angular 2 Book

Tests
Los tests hoy en da son imprecindibles para el desarrollo de software.
Cmo testear una app Angular con:
Karma
Jasmine

Tests

27