Libro Angular 2
Tabla de contenido
Introducción
0
¿Por qué Angular 2?
1
Prerequisitos
2
Enviorement
3
Dependencias
4
Arquitectura
5
TypeScript
6
Components
7
Lifecycle
7.1
Styles
7.2
Templates
8
Data Binding
9
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
TDD
17.1
BDD
17.2
2
Libro Angular 2
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
Libro Angular 2
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
Libro Angular 2
¿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
Libro Angular 2
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
Semilla
https://jakearchibald.com/2014/offline-cookbook/#cache-then-network
Prerequisitos
6
Libro Angular 2
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
Libro Angular 2
Dependencias
Listado de depencias de un proyecto Angular 2.
Dependencias
8
Libro Angular 2
Arquitectura
Una app de Angular 2 está basada en components
Una arquitectura de ejemplo de una app con Angular 2
Arquitectura
9
Libro Angular 2
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
Libro Angular 2
Components
Angular 2 está basado en componentes. Su estructura
básica es la siguiente
Components
11
Libro Angular 2
Lifecycle
El ciclo de vida de un componente
Lifecycle
12
Libro Angular 2
Styles
¿Cómo añadir estilos CSS a lo template de un component?
Styles
13
Libro Angular 2
Templates
template
templateUrl
Templates
14
Libro Angular 2
Data Binding
Formas de rederizado y comunuicación entre un component y su template.
Data Binding
15
Libro Angular 2
Directives
Básicamente son components sin template.
Directives
16
Libro Angular 2
Pipes
En Angular 1.x eran conocidos por filters.
Pipes
17
Libro Angular 2
Routing
¿Cómo se realiza la navegación en una app de Angular 2?
Routing
18
Libro Angular 2
Resolve
¿Cómo realizar navegación entre templates con el los datos previamente cargados?
Resolve
19
Libro Angular 2
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
Libro Angular 2
Http
Recuperando datos a través de Http.
Http
21
Libro Angular 2
Services
Creando servicios para organizar las llamadas Http y como realizar la injección de dichos
servicios.
Services
22
Libro Angular 2
Firebase
¿Cómo integrar Firebase con Angular 2?
Firebase
23
Libro Angular 2
RxJS
RxJS
24
Libro Angular 2
Observables
¿Cómo se comunican los components?
Observables
25
Libro Angular 2
Forms
En el desarrollo web los formularios son complicados.
¿Cómo funcionan los formularios en Angular?
Forms
26
Libro Angular 2
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
Libro Angular 2
TDD
TDD
28
Libro Angular 2
BDD
BDD
29