Angular Avanzado: Lleva tus bases al siguiente nivel - MEAN
4.8 (3,658 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.
12,366 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,658 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.
12,366 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
  • 29.5 hours on-demand video
  • 61 articles
  • 33 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 324 lectures 29:56:17
+ Introducción
5 lectures 15:32
¿Cómo funcionará el curso?
02:41

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?
00:44

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

Instalaciones necesarias para seguir el curso
03:50
+ Dominando la creación automática del Angular CLI
6 lectures 24:15
Introducción a la sección
01:07

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
07:34
Control de la generación de componentes
10:06

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

Paths, servicios y guards
03:52

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

Documentación del Angular CLI
01:16
+ Estructuración de nuestro proyecto
14 lectures 01:17:14

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

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

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

Preview 04:32
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
08:44
Agregar las librerías externas necesarias
08:12

Aquí trabajaremos creando el contenido de estos componentes.

Preview 10:45

Aquí crearemos las rutas principales para nuestra aplicación

Implementando las rutas principales
08:10

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

Separando el login del template
09:48

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

Tarea práctica #2 - Register template
01:58
Resolución de la tarea práctica #2 - Register template
07:09
Aceleración de las animaciones
04:16

Debemos de asegurarnos de no perder nuestro trabajo

Respaldo de nuestro trabajo en GitHub
06:45

Por si acaso tuvieron algún problema, aquí les dejo el código fuente

* Código fuente del trabajo realizado hasta el momento
00:09
+ Módulos
9 lectures 37: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
02:48
Resolución de la tarea práctica #3 - Creación de un módulo personalizado
04:36

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

Rutas hijas - ForChild( )
06:58
* Realizar una limpieza de los módulos y rutas
02:39
Guardar los cambios en GitHub y crear un TAG de producción
09:07

Código fuente de la sección 4

Este es el código fuente de la sección 4, lista y terminada.

* Código fuente - Fin de la sección 4 - Estructura Lista
00:23
+ NOTA: Base para la mayoría de los ejercicios de este curso
2 lectures 04:28
Introducción de la sección
01:15
* Descargar e iniciar el proyecto nuevamente
03:13
+ @inputs, @Outputs y @ViewChild
15 lectures 01:36:17
Introducción a la sección
01:29
Temas puntuales de la sección
00:17
¿Para qué nos puede servir la comunicación entre componentes?
01:38

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

Nuestro componente del ProgressBar
09:47

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

Uso de atributos personalizados
11:24
Crear componente incrementador
09:55

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

@Input - Componente incrementador
07:49

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

@Output - Componente incrementador
09:50

Vamos a dejar funcionando lo mejor que podamos nuestro incrementador component

Pulir detalles de nuestro incrementador component
13:15
* @ViewChild - Referencia a un elemento HTML
05:19
* ng2-charts - Inicio de la tarea
00:12
* ng2-charts - Implementar gráficos de donas
08:49

Esta es una forma de resolver la tarea

* Resolución de la tarea práctica #4 - ng2-charts
10:55
* Código fuente hasta este punto del curso
00:14
+ Servicios básicos, temas, rutas básicas y persistencia de los ajustes
13 lectures 01:24:03
Introducción a la sección
02:38
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:19
Cambiar el CSS principal de forma dinámica
08:20
Agregando clases de CSS sin usar ngClass
07:03
Servicio Settings
16:34
* Colocar la clase 'working' al tema seleccionado
05:06
* Tip: Agrupar todos los servicios en un módulo y en un sólo archivo
10:04
Servicio para controlar el Sidebar - Menú lateral
13:31
Uso de Scripts de archivos importados en el index.html en TypeScript
08:29

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
04:24
* Código fuente de la sección
00:06
+ Observables y Promesas
18 lectures 01:31:12
Introducción a la sección
01:37
Temas puntuales de la sección
00:25
Introducción a las promesas y observables
07:19
* Tip: Creación de Snippets en Visual Studio Code
08:07
Reforzamiento sobre Promesas
10:28

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

Funciones que retornan promesas
04:04
Componente Rxjs y arreglo en el menú
02:35

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

Preview 04:43
Funciones que retornen observables
04:29
Operador map de los observables
06:27
Operador filter
03:45

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

Mas información sobre operadores del RXJS
00:12
Llamar el unsubscribe
04:04
Breadcrumbs usando observables y parámetros de rutas
11:35
* MetaTags, Título y Página actual
06:57
Guardar cambios en GitHub - Sección 8
03:44
* Código fuente de la sección 8
00:12
+ Backend - Node - Express - Mongo - Instalaciones y configuraciones básicas
13 lectures 45:54

Un breve resumen hablado de lo que aprenderemos aquí

Introducción a la sección
02:20
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
04:41

Primeros pasos de nuestro servidor express

Iniciando nuestro servidor de Express
05:57
* Diferentes colores para la consola
00:13
Errores HTTP - PDF
00:19
Primera ruta
10:05

Una breve anotación

* Nota de instalación de MongoDB
00:11
* Instalación de MongoDB
05:31
*Robo 3T - Herramienta para manejar mongo
02:38
Estableciendo conexión entre Mongo y Node
07:09
Realizar un backup en GitHub de nuestro Backend-Server
06:16
* Código fuente de la sección
00:15
+ HospitalAPP - Backend Server - Funciones de Usuarios
17 lectures 01:51:26
Introducción a la sección
00:56
Temas puntuales que cubrimos en la sección
00:12
Panorama general de nuestro backend
05:53
* Creando la colección de usuarios
05:29
Creando el modelo de usuarios
06:28
Creando las rutas de los servicios del usuario
12:08

Aquí crearemos el servicio que nos permite crear usuarios

Preview 12:08
* Validaciones semi-automáticas para el modelo del usuario
06:32

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:10
PUT - Actualizar un registro de usuario
12:40
Delete - Borrar un usuario
05:58

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

Login de usuario
09:47
Generación de un JWT
06:54

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

Revisión del Token - Middleware
09:40
* Optimizar nuestro Middleware para darle flexibilidad
08:12
Fin de la sección 10 - Backup a GitHub
04:05

Aquí pueden descargar el código fuente de la sección hasta el momento

* Código fuente de la sección
00:14
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, Angular 4, Angular 5), 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:

  • 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
  • Metatags desde diferentes aplicaciones
  • 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.

 Se 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