¿Qué es Angular?
Framework JS
SPA: Single Page Applications
¿Angular 2? ¿4? ¿AngularJS?
Entorno de desarrollo
IDE: Visual Studio Code
NodeJS y npm
Extensión ColorZilla
Extensión Page Ruler
Comandos básicos
Clonar un repositorio:
git clone URL
Descargar última versión del repositorio:
git pull origin master
Configuración proxy
git config --global http.proxy http://username:password@host:port
git config --global https.proxy http://username:password@host:port
npm
Instalar última versión después de instalar nodeJS
(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El archivo package.json:
Registro de dependencias
Dependencias de desarrollo y de producción
Versiones (SEMVER)
Tareas (objeto scripts)
Comandos npm
Crear el archivo package.json:
npm init -y
Instalar un paquete de producción:
npm install paquete
Instalar un paquete de desarrollo:
npm install paquete --save-dev
Instalar todas las dependencias
npm install
Instalar las dependencias de desarrollo
npm install [--production]
Configuración proxy
npm config set proxy http://username:password@host:port
npm config set https-proxy http://username:password@host:port
Bootstrap
Bootstrap - clases útiles
hidden-*, visible-*, hide, show
pull-left y pull-right
text-left, text-center, text-right
list-unstyled, list-inline
clearfix
img-responsive, img-circle, img-thumbnail
text-primary, text-success, text-info, text-warning, text-danger
bg-primary, bg-success, bg-info, bg-warning, bg-danger
center-block
Bootstrap - formularios
.form-group
.form-control
.btn, .btn-default, .btn-primary, etc.
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, o implementar alguna interacción con el usuario
Pocas líneas de código, todas en un mismo archivo
Organización del código JavaScript
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?
¡Webpack!
TS -> ES5 -> webpack -> bundle -> browser =
angular-cli
ES6
let y const
Template literals
for ... of
Funciones
Operador spread
Arrow function
Clases
Propiedades y métodos
Herencia con extends y super()
Getters y setters
Métodos estáticos
Módulos
Iterables
Propiedad length
Métodos:
forEach
map
filter
reduce
find
indexOf
Encadenamiento
TypeScript
Superconjunto de JavaScript
Transpila a ES5
Tipado
Errores en tiempo de compilación
tsc
tsconfig.json
TypeScript
Tipos básicos:
number
string
boolean
Array
any
void
Enum
Union types
TypeScript
Funciones
Sin flexibilidad en el número de parámetros
Parámetros opcionales
Clases
Propiedades fuera del constructor
Visibilidad de los miembros
Modificador readonly
Propiedades estáticas
Interfaces
TypeScript
Decoradores (@)
ya era hora...
Primeros pasos
ng new --minimal para generar la app
ng serve -o para verla en el navegador
Entornos dev, hmr y prod
Componentes, templates, módulos
El módulo iniciador y el componente iniciador
Archivos de configuración
Esqueleto de una pieza en Angular
clase =>
=> clase exportada =>
=> clase exportada y decorada =>
=> dependencias
Examinando un componente
Metadata
selector
template / templateUrl
styles / styleUrls
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
@Pipe, PipeTransform
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 HttpClientModule
Módulo HttpClientModule y servicio HttpClient
Métodos del servicio HttpClient:
get(), post(), put(), patch(), delete()
Navegación por la app
El router
Las rutas
Parámetros: ActivatedRoute.paramMap (observable)
Página por defecto
404
Guards
El RouterOutlet
Links de navegación: routerLink y routerLinkActive
router.navigate()
History API
El servicio Title
Despliegue a producción
Pruebas con ng build
ng build:
--prod: optimiza el código
--base-href=: cambia el directorio base
--sourcemaps: genera los source maps
Links