¿Qué es Angular?
Framework JS
SPA: Single Page Applications
¿Angular 2? ¿4? ¿AngularJS?
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
Organización del código JavaScript
Optimización: dividir el código en varios archivos/módulos
Ventajas
Inconvenientes
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
IDE: Visual Studio Code (Atom, Angular IDE...)
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
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
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