Angular
mario@mariogl.comTemario
- Introducción a TypeScript
- Introducción a Angular 2
- Herramientas de Desarrollo
- Módulos
- Plantillas
- Formularios
- Servicios
- Acceso al servidor
- Enrutamiento y navegación
Introducción a Angular
2
¿Qué es Angular?
-
Framework JS
-
SPA: Single Page Applications
-
¿Angular 2? ¿4? ¿AngularJS?
JavaScript
JavaScript
-
Interpretado, compilado y ejecutado en el navegador
-
Cada navegador programa su propio motor de JS
-
Estandarización: ECMAScript
-
La versión ES6 o ES2015
-
Transpiladores: Babel, TypeScript
Organización del código JavaScript
-
Ejemplo de uso clásico de JS: utilizar un plugin de jQuery en nuestra web
-
Pocas líneas de código, todas en un mismo archivo
Organización del código JavaScript
-
Complicándonos un poco: programar unos tabs
-
Pocas líneas de código, todas en un mismo archivo
Organización del código JavaScript
-
Un paso de gigante: programar toda la UI de una página
-
¿2000 líneas en un solo archivo?
Ventajas
Inconvenientes
- Difícil de leer/entender
- Difícil de mantener
- Poca reusabilidad
- Difícil encontrar código no usado
- Colisiones de nombres
- Una sola petición HTTP
Organización del código JavaScript
-
Optimización: dividir el código en varios archivos/módulos
Ventajas
Inconvenientes
- Difícil encontrar código no usado (menos difícil que antes)
- Colisiones de nombres
- Muchas peticiones HTTP
- El orden importa: dependencias
- Legible e inteligible
- Fácil de mantener
- Reutilizable
- Cargamos sólo lo que necesitamos
Organización del código JavaScript
-
Dependencias: es difícil asegurar el orden, y no es posible tener dependencias circulares
Organización del código JavaScript: módulos
-
Module loaders: ellos gestionan las dependencias y cargan los módulos (RequireJS, SystemJS)
-
Module bundlers: además de lo anterior, generan un solo código encadenado y minificado (browserify, webpack)
Organización del código JavaScript: módulos
-
¿Puedo escribir mis módulos como yo quiera? ¿hay un estándar?
-
¿AMD, CommonJS, UMD, ES6?
-
¡TypeScript!
-
TS -> ES5 -> webpack -> bundle -> browser =
angular-cli
Entorno de desarrollo
Entorno de desarrollo
-
IDE: Visual Studio Code (Atom, Angular IDE...)
-
NodeJS y npm
NodeJS y npm
npm
-
Instalar última versión después de instalar nodeJS
-
Módulos globales y módulos locales
-
La carpeta node_modules
-
El archivo package.json
-
npm init
TypeScript
TypeScript
-
Superconjunto de JavaScript
-
Transpila a ES5
-
Tipado
-
Errores en tiempo de compilación
-
tsc
-
tsconfig.json
TypeScript
-
let y const
-
Tipos básicos:
-
number
-
string
-
boolean
-
Array
-
any
-
void
-
-
Enum
-
Union types
TypeScript
-
Funciones
-
Arrow function
-
Clases
-
Visibilidad de los miembros
-
Getters y setters
-
Herencia
-
Interfaces
-
-
Template literals
-
Módulos
TypeScript
-
for...of, forEach
-
map, filter, reduce
-
find, indexOf
-
Promesas
-
Decoradores
Angular
ya era hora...
Primeros pasos
-
ng new para generar la app
-
ng serve -o para verla en el navegador
-
Componentes, templates, módulos
-
~MVC
-
El módulo iniciador y el componente iniciador
-
Entornos dev y prod
-
Archivos de configuración
Esqueleto de una pieza en Angular
-
clase =>
-
=> clase exportada =>
-
=> clase exportada y decorada =>
-
=> dependencias
Examinando un template
-
Custom elements
-
Data binding
-
Interpolation
-
Property binding
-
Class & style binding
-
Event binding
-
Two-way binding
Examinando un template
-
Directivas de atributo
-
ngClass
-
ngStyle
-
-
Directivas estructurales
-
ngIf
-
ngFor
-
ngSwitch
-
-
Pipes
Examinando un componente
-
Metadata
-
selector
-
template / templateUrl
-
styles / stylesUrl
-
-
Directivas estructurales
-
ngIf
-
ngFor
-
ngSwitch
-
-
Pipes
Formularios
-
[(ngModel)]: Two-way binding
-
ngForm, ngModel y ngSubmit
-
Variables de template con #
-
Validaciones: los diferentes estados
-
Resetear los estados
-
Template driven y Reactive forms
Servicios
-
Dependency Injection
-
Injectable()
-
Proveedores
-
Singleton
Conexiones con el servidor
-
Asincronía
-
Observables
-
Suscripciones
-
API REST
-
El módulo HttpClient
-
GET
-
POST
-
PUT
-
DELETE
-
...
-
Navegación por la app
-
El router
-
Las rutas
-
El RouterOutlet
-
Links de navegación
-
History API
Links