Upload
trungtrungkang
View
244
Download
0
Embed Size (px)
Citation preview
8/16/2019 Angular 2 Book
1/27
8/16/2019 Angular 2 Book
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
8/16/2019 Angular 2 Book
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
8/16/2019 Angular 2 Book
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/
8/16/2019 Angular 2 Book
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?
8/16/2019 Angular 2 Book
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
8/16/2019 Angular 2 Book
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/16/2019 Angular 2 Book
8/27
Dependencias
Listado de depencias de un proyecto Angular 2.
Angular 2 Book
8Dependencias
8/16/2019 Angular 2 Book
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
8/16/2019 Angular 2 Book
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/
8/16/2019 Angular 2 Book
11/27
Components
Angular 2 está basado en componentes. Su estructurabásica es la siguiente
Angular 2 Book
11Components
8/16/2019 Angular 2 Book
12/27
Lifecycle
El ciclo de vida de un componente
Angular 2 Book
12Lifecycle
8/16/2019 Angular 2 Book
13/27
Styles
¿Cómo añadir estilos CSS a lo template de un component ?
Angular 2 Book
13Styles
8/16/2019 Angular 2 Book
14/27
Templates
template
templateUrl
Angular 2 Book
14Templates
8/16/2019 Angular 2 Book
15/27
Data Binding
Formas de rederizado y comunuicación entre un component y su template.
Angular 2 Book
15Data Binding
8/16/2019 Angular 2 Book
16/27
Directives
Básicamente son components sin template.
Angular 2 Book
16Directives
8/16/2019 Angular 2 Book
17/27
Pipes
En Angular 1.x eran conocidos por filters.
Angular 2 Book
17Pipes
8/16/2019 Angular 2 Book
18/27
Routing
¿Cómo se realiza la navegación en una app de Angular 2 ?
Angular 2 Book
18Routing
8/16/2019 Angular 2 Book
19/27
Resolve
¿Cómo realizar navegación entre templates con el los datos previamente cargados?
Angular 2 Book
19Resolve
8/16/2019 Angular 2 Book
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
8/16/2019 Angular 2 Book
21/27
Http
Recuperando datos a través de Http.
Angular 2 Book
21Http
8/16/2019 Angular 2 Book
22/27
Services
Creando servicios para organizar las llamadas Http y como realizar la injección de dichos
servicios.
Angular 2 Book
22Services
8/16/2019 Angular 2 Book
23/27
Firebase
¿Cómo integrar Firebase con Angular 2 ?
Angular 2 Book
23Firebase
8/16/2019 Angular 2 Book
24/27
RxJS
Angular 2 Book
24RxJS
8/16/2019 Angular 2 Book
25/27
Observables
¿Cómo se comunican los components?
Angular 2 Book
25Observables
8/16/2019 Angular 2 Book
26/27
Forms
En el desarrollo web los formularios son complicados.
¿Cómo funcionan los formularios en Angular?
Angular 2 Book
26Forms
8/16/2019 Angular 2 Book
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