Herramientas de trabajo y Angular CLI
Clase 6 de 80 • Curso de Angular 4
Contenido del curso
Introducción a Angular 4
Setup del Ambiente de Trabajo
Conceptos Básicos
- 9

Para qué nos sirven los Módulos y Componentes
08:10 min - 10

Tipos de Data Binding y String Interpolation
05:05 min - 11

Property Binding
06:04 min - 12

Event Binding
03:04 min - 13

ngModel y two way binding en Angular
05:12 min - 14

Directivas en Angular 4 y ngFor
07:39 min - 15

Cómo usar ngIf en Angular 4.0
03:04 min - 16

Instalando librerías con NPM (Google Maps)
06:48 min
Directivas
Angular UI
Ruteo
- 24

Qué hace el router en Angular 4
03:11 min - 25

Implementación de Rutas en el Proyecto
07:36 min - 26

Href vs router link: navegación angular
02:27 min - 27

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos
01:53 min - 28

Parámetros de ruta con routerLink en Angular
06:01 min - 29

Parámetros tipo Query
03:53 min - 30

Creando una vista de detalle para el proyecto
09:06 min - 31

Página de contacto Angular desde cero
07:45 min
Servicios
- 32

Servicios en Angular para compartir datos
00:58 min - 33

Creando nuestro propio servicio
07:11 min - 34

Configurando Firebase en nuestro proyecto
05:12 min - 35

Guardando Records en Firebase
12:20 min - 36

Obteniendo records desde Firebase
08:40 min - 37

Obteniendo coordenadas usando Geocoding
13:45 min - 38

Reto: Crear una vista para editar records
09:29 min - 39

Mostrando marcadores en el Mapa de Google
03:02 min
Conexión Remota (Http y Sockets)
Pipes
Animaciones en Angular
Testing en Angular
Autenticación y Protección de Rutas
- 59

Cómo funcionan los JSON Web Tokens
03:05 min - 60

Preparación de vistas para login y registro
11:58 min - 61

Registrando usuarios
07:29 min - 62

Loggeando usuarios
07:18 min - 63

Guardias canActivate en Angular: Proteger rutas con autenticación
11:09 min - 64

Cómo integrar Facebook login con Firebase
09:08 min - 65

Logout en Angular con Firebase
05:28 min
RxJS
- 66

Cómo funciona RxJS con metáfora de oficina
02:09 min - 67

Mostrar email del usuario logueado en Angular
06:32 min - 68

Uso de los Observables
04:30 min - 69

Cómo implementar type ahead con Observables y RxJS
10:43 min - 70

Implementar formularios reactivos con type ahead
07:58 min - 71

Cómo rellenar campos automáticamente con Google
01:28 min
Publicando nuestro proyecto
Fin del curso
Sesiones en vivo
Contenido Bonus
Domina un flujo de trabajo confiable para Angular cuatro usando la herramienta correcta. Aquí conocerás por qué Angular CLI simplifica la configuración, cómo se apoyan en Node.js, el navegador Chrome y editores como PHP Storm, y qué aporta cada pieza para crear, probar y preparar tu app para producción.
¿Qué herramientas se usarán y para qué sirven?
Para avanzar con seguridad, conviene tener claro qué usar y por qué. La prioridad es elegir la herramienta correcta para ahorrar tiempo y evitar errores.
- Navegador web: se usará Chrome con sus herramientas de desarrollador. Si ya conoces Firefox con Firebox, puedes usarlo, aunque no se verán conceptos específicos de Firebox.
- Editor de texto: opciones como Brackets, Atom, Subline, Notepad++ o PHP Storm.
- PHP Storm: destaca por autocompletado, highlight de sintaxis y navegación entre clases, además de soporte nativo de TypeScript.
- Nota sobre TypeScript: si tu editor no lo soporta de forma nativa, puedes buscar un plugin para añadirlo.
- Node.js: no se escribirá código en Node, pero se necesitará su manejador de paquetes, llamado MPM.
- Angular CLI: será la herramienta más usada durante todo el desarrollo.
¿Por qué Angular CLI es la herramienta correcta para Angular cuatro?
Configurar Angular cuatro puede resultar retador por su naturaleza robusta y la cantidad de piezas móviles que deben funcionar en conjunto. Muchas personas abandonaban porque “no funcionaba como debería”. Aquí entra la idea clave: usar siempre la herramienta correcta.
La explicación se ilustra con una escena de Indiana Jones: el enemigo parece fuerte y ágil, pero en vez de usar el látigo, Indiana saca una pistola y resuelve el problema de forma directa. Lo mismo ocurre con Angular CLI: un problema complejo se resuelve de manera simple y rápida al elegir bien.
- Qué es Angular CLI: un set de herramientas para consola.
- Qué hace: genera el proyecto base y también componentes, rutas, servicios y pipes.
- Qué facilita: correr la app de forma local en el navegador, hacer app testing y preparar la app para producción.
- Beneficio central: reduce la fricción de la configuración y te permite enfocarte en el desarrollo.
¿Cómo se integran navegador, editor y Node.js en el desarrollo?
La colaboración entre herramientas es clave para un ciclo de trabajo ágil y claro.
- Con Angular CLI generas la estructura del proyecto y los artefactos que necesites.
- En el editor (por ejemplo, PHP Storm) aprovechas autocompletado, highlight de sintaxis y navegación entre clases para escribir código más rápido y con menos errores.
- En el navegador (Chrome) ejecutas la app localmente y verificas cambios de forma inmediata.
- Con MPM desde Node.js gestionas lo que requiere la ejecución de la app.
- Usando Angular CLI realizas app testing y preparas el build para producción cuando esté listo.
¿Con qué editor te sientes más cómodo y por qué? Comparte tu experiencia usando Angular CLI en los comentarios.