Angular Avanzado: Lleva tus bases al siguiente nivel - MEAN
4.8 (3,881 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13,378 students enrolled

Angular Avanzado: Lleva tus bases al siguiente nivel - MEAN

MEAN, Google Signin, JWT, carga de archivos, lazyload, optimizaciones, Git, GitHub, panel administrativo y mucho más.
4.8 (3,875 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13,376 students enrolled
Created by Fernando Herrera
Last updated 7/2020
Spanish
Spanish [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 32 hours on-demand video
  • 58 articles
  • 31 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Elaborar un sistema de hospitales - para controlar médicos, hospitales y usuarios
  • Implementar un panel administrativo con roles de usuario
  • Dominar módulos, servicios, lazyload y más
  • Implementar autenticación vía JWT
  • Crear un backend usando Mongo, Express
  • Utilizar Google Signin como una opción de login para nuestras aplicaciones
  • El objetivo final es llevar tus conocimientos de angular al siguiente nivel
  • Tener una base sólida sobre pruebas unitarias y de integración
Course content
Expand all 342 lectures 32:19:14
+ Introducción
4 lectures 16:19
¿Cómo funcionará el curso?
02:33

Suena muy básico, pero por favor revisar el video, me ayudará a poder resolver sus preguntas más rápido

¿Cómo hacer preguntas?
03:35

Es probable que tengan instalado todo, pero es importante revisarlo.

Instalaciones necesarias para seguir el curso
07:52
+ Dominando la creación automática del Angular CLI
8 lectures 33:05
Introducción a la sección
01:14

Breve resumen de los temas puntuales de la sección

Temas puntuales que tocaremos en la sección
00:20

Aquí aprenderemos las guías básicas sobre la ayuda del Angular CLI

Uso de la ayuda del AngularCLI
04:15
Control de la generación de componentes
11:08

Formas de especificar paths y crear servicios y guards rápidamente

Paths, servicios y guards
09:27

Documentación oficial del AngularCLI, es el mejor lugar para tener información de primera mano

Documentación del Angular CLI
01:21
Material de tarea
00:08
Tarea práctica - Errores en proyecto
05:11
+ Estructuración de nuestro proyecto
17 lectures 01:26:11

Un breve resumen hablado de lo que veremos a continuación

Introducción a la sección
02:02
Temas puntuales que tocaremos en la sección
00:12

Descargas y explicaciones necesarias para comenzar el trabajo de esta sección

Preview 04:06
Breve descripción del proyecto que haremos juntos
04:20

Aquí iniciamos tomando componentes y páginas del template para ir creando nuestro AdminPro

Primeros componentes e inicio de la estructura del proyecto
06:08
Agregar las librerías externas necesarias
11:09

Aquí trabajaremos creando el contenido de estos componentes.

Preview 13:30

Aquí crearemos las rutas principales para nuestra aplicación

Implementando las rutas principales
10:52
Implementar rutas secundarias
06:39

Aquí aprenderemos a tener dos estilos completamente diferentes en el mismo proyecto

Separando el login del template
04:50

En esta tarea, debemos de poner en práctica lo aprendido hasta el momento

Tarea práctica #2 - Register template
01:15
Resolución de la tarea práctica #2 - Register template
02:15
Aceleración de las animaciones
04:13
Página 404
03:47

Debemos de asegurarnos de no perder nuestro trabajo

Respaldo de nuestro trabajo en GitHub
07:53
Crear release de producción en GitHub
02:51
Código fuente
00:09
+ Módulos
10 lectures 40:39
Introducción a la sección
01:30
Temas puntuales que aprenderemos en esta sección
00:14
Tarea práctica #3 - Creación de un módulo personalizado
01:31
Resolución de la tarea práctica #3 - Creación de un módulo personalizado
05:13

Resolveremos el problema de implementar el router en nuestro pages.component.html

Rutas hijas - ForChild( )
06:22
AuthRoutingModule
04:37
Colocando nuestras rutas a partir de un path específico
03:16
Guardar los cambios en GitHub y crear un TAG de producción
04:28
Código de la sección
00:08
+ NOTA: Base para la mayoría de los ejercicios de este curso
3 lectures 08:59
Introducción de la sección
00:57
Usar un backup de Github para continuar el proyecto
03:41
Clonar un proyecto en Github
04:21
+ @inputs y @Outputs
16 lectures 01:33:20
Introducción a la sección
01:15
Temas puntuales de la sección
00:17
¿Para qué nos puede servir la comunicación entre componentes?
01:48

Empezaremos a crear el HTML necesario para poder ejemplificar bien la necesidad de los @Inputs y @Outpus

Nuestro componente del ProgressBar
12:42

Aprenderemos a utilizar atributos personalizados de los elementos HTML, que Angular desconoce.

Uso de atributos personalizados
12:21
Crear componente incrementador
10:34

Aquí crearemos un componente que nos sirva para aceptar parámetros del padre

@Input - Componente incrementador
04:02

Ahora vamos a emitir un evento para que el padre pueda realizar una acción cuando sucede algo

@Output - Componente incrementador
10:02
Color de los botones de forma condicional
05:51

Vamos a dejar funcionando lo mejor que podamos nuestro incrementador component

Pulir detalles de nuestro incrementador component
06:52
Material para la siguiente clase
00:18
Gráficas en Angular
08:21
Tarea de Inputs y Outputs
09:20
Solución a la tarea de Input y Output
03:59
Código de la sección
00:14
+ Servicios básicos, temas, rutas básicas y persistencia de los ajustes
12 lectures 01:12:10
Introducción a la sección
01:18
Temas puntuales de la sección
00:21
Material de la sección
00:08

Empezaremos creando un diseño básico de la página Account Settings, el cual tendrá una opción para cambiar los temas de la aplicación y que el usuario pueda seleccionar cual tema quiere usar y hacerlo persistente

Diseño inicial de la página account-settings
07:41
Cambiar el CSS principal de forma dinámica
13:35
Agregando clases de CSS sin usar ngClass
11:01
Servicio Settings
10:56
RouterLink - Mover a una ruta en particular
04:03
Servicio para controlar el Sidebar - Menú lateral
10:03
Uso de Scripts de archivos importados en el index.html en TypeScript
10:24

A continuación guardaremos todos nuestros cambios en GitHub para asegurarnos que tenemos un backup de todo!

Guardar nuestros cambios en GitHub - Sección 7
02:31
Código de la sección
00:09
+ Observables y Promesas
17 lectures 01:33:13
Introducción a la sección
02:13
Temas puntuales de la sección
00:25
Introducción a las promesas y observables
07:19
Reforzamiento sobre Promesas
10:00

Esta es la estructura más común que tienen las promesas

Funciones que retornan promesas
08:23
Componente Rxjs y arreglo en el menú
04:38

Aquí aprenderemos a volver a intentar ejecutar nuevamente el observable, en caso de que suceda mal algo.

Preview 06:27
Funciones que retornen observables
04:48
Operador map de los observables
07:59
Operador filter
06:34

Aquí les dejo la documentación de todos los operadores disponibles

Mas información sobre operadores del RXJS
00:12
Llamar el unsubscribe
05:33
Breadcrumbs usando observables y parámetros de rutas
11:51
Optimizaciones del Breadcrumbs
04:59
Guardar cambios en GitHub - Sección 8
02:00
Código de la sección
00:17
+ Backend - Node - Express - Mongo - Instalaciones y configuraciones básicas
13 lectures 52:45

Un breve resumen hablado de lo que aprenderemos aquí

Introducción a la sección
01:52
Temas puntuales de la sección
00:17

Inicio de nuestro servidor en el cual tendremos corriendo para poder realizar peticiones, autenticaciones y almacenar en base de datos

Inicio del backend server
03:50

Primeros pasos de nuestro servidor express

Iniciando nuestro servidor de Express
08:05
Errores HTTP - PDF
00:19
Primera ruta
06:42
Nota: Enlaces a MongoDB Altas
00:14
Mongo Altas - Configuración de BD
06:45
Estableciendo conexión entre Mongo y Node
09:55
Variables de entorno
05:58
Configurar CORS
03:38
Realizar un backup en GitHub de nuestro Backend-Server
04:58
Código de la sección
00:11
+ HospitalAPP - Backend Server - Funciones de Usuarios
19 lectures 02:11:38
Introducción a la sección
01:48
Temas puntuales que cubrimos en la sección
00:12
Panorama general de nuestro backend
05:53
Creando el modelo de usuarios
06:54
Creando las rutas de los servicios del usuario
08:38

Aquí crearemos el servicio que nos permite crear usuarios

Preview 11:02
Terminar el GET de los usuarios
05:09
Validar que el correo electrónico sea único
05:47
Validar campos obligatorios
09:03
Middleware personalizado - ValidarCampos
04:36

Aprenderemos a encriptar la contraseña utilizando un método de una sola vía

Encriptar la contraseña usando método de una sola vía
04:54
PUT - Actualizar un registro de usuario
15:47
Nota: Optimizaciones
02:36
Delete - Borrar un usuario
06:45

Realizaremos el proceso de autenticación para nuestra aplicación

Login de usuario
12:35
Generación de un JWT
14:18

Vamos a crear nuestro primer middleware oficialmente, el cual nos servirá para validar el token

Revisión del Token - Middleware
12:49
Fin de la sección 10 - Backup a GitHub
02:41
Código fuente de la sección
00:11
Requirements
  • Conocimiento de Angular es necesario
  • Conocimiento sobre los servicios y componentes básicos es necesario
  • Saber un poco sobre los ciclos de vida de los componentes
  • Poder crear componentes y servicios mediante el AngularCLI es recomendado
  • Saber Angular con TypeScript
  • NO es necesario saber Node
  • NO es necesario saber MongoDB
Description

Este curso tiene por objetivo tomar tu conocimiento de Angular (Angular 2,4,5,6,7,8,9 o 10), y llevarlo al siguiente nivel creando una gran aplicación modular de gran escala.   

 El curso no pretende enseñarte las bases de Angular, ya que doy por hecho que sabes cómo programar utilizando el framework, al menos saber cómo utilizar servicios, componentes básicos, ciclo de vida de un componente y rutas, todo lo demás lo enseñaremos aquí.

 Este curso es totalmente práctico, aprenderemos haciendo una aplicación completa desde cero, que va desde el Front-End hasta el Backend, trabajando con MongoDB, JWT y Google SignIn.

 Haciendo un resumen puntual de lo que contiene este curso es:

  • MEAN Stack

    • Mongo

    • Express

    • Angular

    • node

  • Estructura de una aplicación de Angular a gran escala

  • Aplicación en base a módulos

  • Tema administrativo Premium, pre-pagado para todos los alumnos de este curso (sin costo adicional) 

  • Backend server completo:   

    • Express   

    • RESTFul API   

    • Subida de archivos   

    • CORS   

    • MongoDB   

    • JWT   

    • Revisión de tokens de Google SignIn   

    • Paginaciones   

  • Contenido de Angular enriquecido para trabajar con el el backend server   

  • Pruebas unitarias   

  • Pruebas de integración   

  • Google SignIn protegido por token desde el Front-End hasta el Backend   

  • Uso de librerías de terceros en proyectos de Angular   

  • Rutas con configuraciones   

  • Backups con GitHub   

  • Control de versiones y releases   

  • Generar la aplicación para distribución sobre Node y Apache   

  • Y mucho más  

 Al finalizar el curso de forma completa, no sólo conocerás más sobre Angular, tendrás el conocimiento necesario para empezar proyectos complejos en segundos usando el sistema de versionamiento que creamos aquí. El backend server es lo suficientemente robusto para utilizarlo donde quieras o usarlo de base para tus propias configuraciones, y el tema de las pruebas unitarias te servirá para poder tener la seguridad de que tu aplicación ha sido probada y te ayudará mucho cuando necesites pasarla a producción.

 Te invito a que revises las secciones gratuitas, el video de demostración del curso y el extenso plan de trabajo basado en videos cortos inferiores a los 10 minutos.

 Sé que este curso te servirá mucho en tu vida personal y profesional como desarrollador.

   

   

Who this course is for:
  • Desarrolladores que quieran mejorar su conocimiento de Angular
  • Personas que quieran elaborar un proyecto a gran escala en Angular
  • Todos los que deseen conocer sobre MEAN ( Mongo Express Angular Node)
  • Desarrolladores que deseen poner en practica su conocimiento de Angular
  • Personas que desean crear un Backend robusto