4.69 de 5
4.69
18651 valoraciones en Udemy

Angular de cero a experto creando aplicaciones (Angular 9+)

Todo lo que necesitas saber de angular utilizando TypeScript y buenas prácticas ofrecidas por el equipo de angular.
Profesor:
Fernando Herrera
44.139 Estudiantes apuntados
Spanish [Auto-generated]
Tener una base sólida para trabajar con Angular
Dominar TypeScript para crear aplicaciones en Angular
Aplicar los conceptos nuevos del ECMAScript 6 en nuestros proyectos de Angular
Crear aplicaciones en Angular siguiendo las mejores prácticas
Crear aplicaciones básicas en Ionic y utilizarlas en su celular (no es necesario cuentas de desarrollador)
Dominar las directivas, pipes, componentes, servicios y la estructura de una aplicación de Angular

Angular es un marco de trabajo (framework) de front-end impulsado por Google. Creado para desarrollar aplicaciones web, aplicaciones móviles o realizar procesos del lado del servidor utilizando NodeJS.

Este curso se enfoca en llevarte de la mano desde cero hasta poder crear aplicaciones de todo tipo, que van desde páginas web de una sola página (SPA – single page application) hasta conectarnos a una base de datos para realizar proceso de inserción, actualización, eliminación y selección de información. Este curso contiene todo lo que tu necesitas para poder crear aplicaciones con este framework tan potente y veloz.

Curso + Aplicaciones

Cada sección del curso termina en una aplicación completa que sirve para aprender y dominar un tema en especifico. Y conforme vayamos avanzando en el curso, iremos creando aplicaciones más complejas y sin darnos cuenta ya estaremos creando directivas, componentes, pipes, servicios y rutas sin darnos cuenta.

Este curso no sólo te enseñara Angular, también conocerás …

  • Firebase
  • Firebase RESTful services
  • Firebase Cloud Functions
  • CRUD
  • TypeScript
  • ECMAScript 6
  • Reactive-Extensions
  • Sockets
  • Ionic 5
  • Atom packages / Visual Studio Code Extensiones
  • Angular CLI
  • AngularFire
  • Local Storage
  • Bootstrap 4
  • Spotify API
  • Youtube API
  • Entre otras tecnologías…

Resolver problemas

Aprenderemos este potente y muy veloz framework, con las debidas introducciones al código, lógica para resolver problemas utilizando las mejores prácticas y la guía de estilos oficial de Angular.

Tendremos un poco de teoría introductoria pero el 95% del curso es práctico y se enfoca en crear varias pequeñas-medianas aplicaciones escalables, que te harán experto en Angular.

Entre las aplicaciones que haremos en este curso están:

  • Aplicación de música utilizando el API de Spotify
  • Aplicación estática que sirve páginas HTML – SPA
  • Aplicación de cine
  • Auth0 – Aplicación con paginas protegidas usando login de Facebook, Google, Linkedin o datos personalizados.
  • Aplicación de Mapas de Google
  • Aplicación de lista de deseos –  Ionic
  • Aplicación CRUD usando FireBase RESTful services
  • Chat utilizando Sockets, Firebase y AngularFire2
  • Aplicación de videos de YouTube
  • Aplicaciones ilustrativas del comportamiento de diversos componentes y directivas de Angular
  • Gráficos
  • Subir archivos a Firebase

ECMAScript 6) y TypeScript

Adicionalmente hay una sección completa para aprender ES6 (ECMAScript 6) y TypeScript, que te enseñaran todo lo que necesitas para poder programar utilizando el Framework de Angular con TypeScript.

Durante el curso, tendremos tareas prácticas y teóricas que aseguran tu comprensión sobre Angular, adicionalmente cada sección esta pensada para realizarse en poco tiempo y te hará construir una aplicación pequeña en base a videos cortos menores de 10 minutos (en el 98% de los mismos)

Cada sección enseña un tema independiente, por lo que puedes tomar descansos y saber que comenzaras de nuevo en cada sección.

No hay ningún costo adicional durante el curso, todas las herramientas aquí utilizadas son open source, gratuitas o servicios que podemos consumir sin ningún problema.

Si conoces o no Angular, este es un curso que debes de tomar, me he esforzado mucho para poder realizar este curso que te será de mucha ayuda, inclusive si sólo deseas el conocimiento adicional que cada módulo ofrece.

Introducción al curso de Angular

1
Introducción

Una introducción al framework, sus orígenes, y por qué el cambio tan radical.

2
Actualización: Información sobre Angular y el curso
3
¿Cómo realizar preguntas?

Ayúdame a darte una mejor respuesta 

4
¿Cómo funcionará este curso?

En esta clase explicamos cómo funcionará el curso y dónde encontrar información útil

5
Instalaciones y configuraciones mínimas necesarias.

A continuación veremos las herramientas que debemos de instalar para poder seguir al pie de la letra el curso. 

Todo el recurso aquí utilizado es gratuito o de uso libre.

6
Instalaciones adicionales

En caso de que sea necesario, debido a alguna actualización del curso, ire colocándolas aquí

Gentil introducción a TypeScript y ES6

1
Introducción a la sección
2
¿Qué aprenderemos en esta sección?

Un resumen de lo que aprenderemos

3
Introducción a TypeScript

Primeros pasos en TypeScript

4
Demostración de TypeScript

Un código ilustrativo de las bondades del TypeScript

5
Configuración de TypeScript

Inicializando el proyecto de TypeScript

6
Variables let y const

Declaraciones de variables y constantes del ES6 disponibles en TypeScript

7
Introducción a los tipos de datos

Una breve introducción al manejo de las variables en TypeScript

8
Excluir archivos a traducir

Aquí veremos una forma de evitar que TypeScript compile todo

9
Template literales del ES6

Nuevas formas de crear variables de tipo texto (strings)

10
Funciones: Parámetros opcionales, obligatorios y por defecto

Explicación de los 3 tipos de parámetros de las funciones en TypeScript y ES6

11
Funciones de Flecha

Nueva forma de crear funciones que no modifican el objeto THIS y poseen otras bondades.

12
Desestructruación de Objetos y Arreglos

Formas de asignar variables y obtener información de objetos más rápidamente y con menos código.

13
Promesas

Una forma de controlar tareas asíncronas.

14
Promesas y su tipado en TypeScript

Aquí realizaremos un trabajo con promesas para comprender más sobre su funcionamiento y tipado

15
Interfaces de TypeScript

Contratos que nuestro compilador entenderá y nos obligará a respetar

16
Introducción a las Clases de la POO

Por si acaso no sabes el concepto de las clases.

17
Definición de una clase básica en TypeScript

Introducción a las clases de TypeScript

18
Constructores de una clase en TypeScript

Es lo primero que se ejecuta cuando creamos una nueva instancia de una clase.

19
Importaciones * URL

Inicio de un proyecto que nos permita realizar importaciones

20
Decoradores de Clases

Característica nueva del TypeScript, que nos permite adicionar funcionalidades a nuestras clases y objetos.

21
Tipado del retorno de una función

Aquí vamos a colocar el tipado de las funciones

22
Exámen práctico #1

Poniendo en práctica lo aprendido en la sección

23
Explicación de la tarea

Explicación de la tarea #1

24
Resolución del examen práctico #1

Esta es una posible solución al ejercicio

25
Examen teórico #1

Reforzando lo aprendido en la sección

26
Código fuente de la sección

Aquí les dejo el código fuente de la sección por si lo llegan a necesitar

Aplicación #1: Hola Mundo

1
Introducción a la sección
2
¿Qué aprenderemos en esta sección?

Un breve resumen del contenido de esta sección

3
Demostración de lo que lograremos en esta sección

Este es el objetivo final de esta sección

4
Introducción a los componentes y directivas estructurales.

Primer paso en Angular 2, comprender los componentes, servicios y directivas estructurales.

5
Nuestra primera interacción en Angular

Utilizando Plunker

6
Nota de Actualización del AngularCLI

Una pequeña actualización

7
Creando un entorno local de Angular

Iniciando nuestro Hola Mundo

8
Estructura del proyecto

Para el conocimiento nuestro, aquí una breve descripción de los archivos.

9
Utilizando Bootstrap 4

Una pequeña acción para que nuestras aplicaciones se vean mucho mejor.

10
TemplateUrl: Separando el HTML el componente

Para tener orden entre la parte HTML y el componente

11
Creando el footer.component

Creando un footer para nuestra página

12
Estructura del body component

Vamos a trabajar un poco en el estilo del body

13
Directivas estructurales: *ngFor y el *ngIf

La primera directiva estructural para la repetición de elementos.

14
Examen teórico - de la sección Hola Mundo

Este es el examen correspondiente a esta sección.

15
Código fuente de la sección

Código fuente de la sección adjunta aquí

Aplicación #2: Aplicación de una sola página (SPA)

1
Introducción a la sección
2
¿Qué veremos en esta sección?

Un breve resumen del contenido de esta sección

3
Demostración de lo que lograremos en esta sección

Este es el objetivo final de esta sección

4
Iniciar el proyecto - SPA

Angular CLI - Command Line Interface.

5
Creando la estructura de nuestro proyecto

Crearemos la estructura del proyecto utilizando el Angular CLI

6
Instalando el bootstrap cuando usamos el Angular-CLI

Aquí aprenderemos a instalar el bootstrap cuando usamos el Angular-CLI

7
Configurando el navbar y otros componentes

En esta clase, le daremos forma a nuestra aplicación.

8
Rutas en Angular

Este será el corazón de nuestra aplicación de una sola página.

9
RouterLink y RouterLinkActive - Completando las rutas

Manejando el estilo de los links y terminaremos la ruta de la aplicación.

10
Componente Heroes - diseño

Este es el componente encargado de mostrar toda la información de nuestros héroes.

11
Introducción a los Servicios

Los servicios los utilizaremos a lo largo de nuestras aplicaciones, y comúnmente contienen los orígenes de datos.

12
Creando nuestro primer servicio - HeroesService

Crearemos nuestro primer servicio para traer información sobre los héroes de nuestra aplicación.

13
Página de Heroes - Diseño con *ngFor

Trabajaremos el diseño de nuestra página de héroes para que se vea elegante utilizando las tarjetas del bootstrap 4 y el *ngFor

14
Rutas con parametros - Router

Aquí aprenderemos dos formas de movernos a otras páginas y la forma de utilizar parámetros. 

15
Recibiendo parámetros por URL - ActivatedRoute
16
Tarea práctica #1 - Componente del héroe

Su trabajo será terminar la pantalla del héroe

17
Resolución de la tarea práctica #1 - Componente del héroe

Esto es una posible solución a nuestra tarea.

18
Pipes: Transformación visual de la data.

De esta forma transformamos únicamente de forma visual, la data que queremos mostrar en pantalla.

19
Buscador de Héroes

Realizando el mecanismo de búsqueda de héroes.

20
Tarea práctica #2: Crear la pantalla de búsqueda de héroes.

Esta es la tarea más retadora que tenemos hasta el momento.

21
Resolución de la tarea 2 - Buscador de Héroes

Resolución de la tarea y asignación de la búsqueda de héroes.

22
Plus: Mostrando un mensaje cuando no hay resultados.

Mostrando un mensaje cuando no hay resultados en la búsqueda.

23
@Input - Recibir información de un componente padre a un hijo

Esta es una forma de recibir información de un componente padre a un hijo

24
@Output - Emitir un evento del hijo hacia el padre

Esta funcionalidad es importante cuando necesitamos que el componente hijo emita eventos diciendo que algo sucedió

25
Arreglar detalles de la búsqueda

La búsqueda tiene un pequeño problema con el manejo de indices... pero aquí lo arreglaremos

26
Código fuente de la sección

Aquí les dejo el código fuente de la sección

Pipes - Transforman los valores mostrados en pantalla

1
Introducción a la sección

Introducción a la sección

2
¿Qué aprenderemos en esta sección?

Un resumen de todo lo que aprenderemos en la sección.

3
Demostración del resultado de la sección - Pipes

Esto es lo que lograremos al terminar la sección.

4
Inicio del proyecto y la introducción a los Pipes

Los pipes transforman la data de forma visual, sus valores seguirán siendo los mismos.

5
Pipe: Slice

Un pipe que sirve para cortar elementos, arreglos o strings.

6
Pipe: Decimal

Pipe para controlar la forma en la que se muestran los números.

7
Pipe: Percent - Porcentajes

Un pipe que nos ayudará a mostrar números en su forma de porcentajes.

8
Pipe: Currency - Moneda

Un pipe utilizado para darle formato de moneda a nuestros números.

9
Pipe: Json

Un pipe muy utilizado cuando queremos saber que tipo de información contiene un objeto.

10
Pipe: Async

Un pipe asincrono. 

11
Pipe: Date - Fecha

Un Pipe muy poderoso cuando queremos transformar fechas o strings con formato de fecha.

12
Registrar otros idiomas

Aquí aprenderemos a registrar otros idiomas en nuestra aplicación

13
Pipes personalizados: Capitalizar palabras

Crearemos un pipe personalizado para poder utilizarlo a lo largo de nuestro programa.

14
Pipe Personalizado: Domseguro

Esta es una forma de utilizar el DomSanitizer, para asegurarnos que nuestro código es HTML es seguro.

15
Tarea de Pipes

Crear el siguiente pipe personalizado.

16
Resolución de la tarea de Pipes

Aquí resolveremos la tarea de los pipes.

17
Código fuente de la sección

Aquí les dejo el código fuente de la sección

Aplicación #3: SpotiApp

1
Introducción a la sección
2
¿Qué aprenderemos en esta sección?

En resumen aprenderemos estos temas en concreto.

3
Demostración del resultado de esta sección

Aquí esta el resumen visual de lo que haremos a lo largo de esta sección.

4
Sitio web de developer de Spotify

Una pequeña actualización

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.7
4.7 de 5
Calificaciones 18651

Calificación Detallada

5 estrellas
12338
4 estrellas
5169
3 estrellas
939
2 estrellas
136
1 estrellas
62
05cef3a0b16210614fbfaba7caee52be
DEBES ESTAR REGISTRADO PARA ACCEDER AL CURSO

Contenido

33 horas de video online
54 Articulos
Acceso sin limites
Acceso desde Móvil y Smart TV
Certificado de finalización

Newsletter

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad