Crea tu propia biblioteca de componente con Angular 8/9
4.8 (11 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.
81 students enrolled

Crea tu propia biblioteca de componente con Angular 8/9

Globaliza tu código con una biblioteca o libreria
4.8 (11 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.
81 students enrolled
Last updated 4/2020
Spanish
Spanish [Auto]
Current price: $129.99 Original price: $199.99 Discount: 35% off
15 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 8 articles
  • 1 downloadable resource
  • 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
  • Crear la estructura de una biblioteca en Angular
  • Usar tu biblioteca para tus propios proyectos
  • Compartir con otros tu biblioteca o libreria
Course content
Expand all 173 lectures 10:32:38
+ Introducción
6 lectures 01:48
¡Pregunta!
00:23
Sobre las calificaciones tempranas
00:23
Redes sociales
00:01
¡Estate atento a todo lo que hago!
00:04
Discord
00:03
+ Creando nuestra biblioteca
15 lectures 39:12
Creación de proyectos
06:13
Compilar proyectos
02:11
No generar package-lock
01:22
Instalar nuestro proyecto en nuestra app base
01:56
Linkear nuestro proyecto con nuestra app base
02:17
Añadir configuración para ver nuestros componentes sin compilar
01:49
Crear una cuenta en npmjs
02:35
Como conectarnos con npmjs
01:50
Añadir mas información en el package.json
04:27
Readme.md
02:08
Como publicar en npmjs
02:04
Instalar dependencia de npmjs
02:11
Creando nuestra base de showcase
03:47
+ Pipe Join
8 lectures 17:29
Creando nuestro proyecto y nuestro pipe
02:12
Exportando nuestro pipe y nuestro módulo
01:20
Compilando e instalando nuestro proyecto
02:20
Añadiendo nuestro pipe al app.module de la app base
00:58
Creando nuestro showcase
04:59
Publicando nuestro proyecto
02:57
Instalando nuestro proyecto desde npmjs
01:33
+ Componente Spinner
10 lectures 36:09
Creando nuestro proyecto
02:40
Creando el showcase
04:02
Creando nuestra estructura para nuestro spinner
04:50
Servicio de nuestro spinner
01:56
CSS para nuestro spinner
04:17
Template base de nuestro spinner
02:44
Colocar imágenes en nuestro spinner
01:52
Testeando nuestro spinner
09:01
Publicar nuestro proyecto
03:50
+ Componente Toast
14 lectures 51:52
Creando e instalando nuestro proyecto
01:44
Creando nuestra base de showcase
02:41
Creando la estructura de nuestro proyecto
01:55
Creando nuestra clase DdrToast
01:47
Definiendo constantes globales
01:42
Dándole forma a nuestro servicio
07:53
Inputs de nuestro componente
01:58
Template de nuestros toasts
04:24
Estilos de nuestro componente
05:33
Añadir dependencias
04:50
Testeando nuestro componente
07:28
Añadiendo animaciones
07:02
Publicando nuestro proyecto
01:39
+ Directiva ClickOutside
7 lectures 26:37
Creacion proyecto
02:11
Creación showcase
01:59
Dando forma a nuestra directiva
04:28
Creando la lógica de nuestra directiva
03:31
Testeando nuestra directiva
11:59
Publicar nuestra directiva
01:35
+ Componente dropdown
18 lectures 01:12:26
Creacion proyecto
02:14
Creación showcase
01:33
Estructura inicial dropdown
01:35
Clase DDR Select Item
02:22
Atributos, inputs y outputs
04:26
Empezando con el template del dropdown
09:10
Mostrar panel de opciones
07:00
Buscador
07:59
Seleccionar item
02:18
Precargar un item
03:38
Retocando estilos
03:40
Animaciones
04:43
Templates
06:18
Directiva click-outside en nuestro dropdown
05:42
Retocando el showcase
04:48
Publicando nuestro proyecto
02:12
Aviso sobre la versión 8.0.1
01:43
+ Directiva loadIframe
7 lectures 15:03
Creacion del proyecto
02:28
Showcase
01:56
Estructura de nuestro proyecto
01:13
Creando nuestra directiva
03:43
Testeando nuestra directiva
03:07
Publicando nuestra directiva
01:30
+ Servicio configuracion
10 lectures 28:02
Creación del proyecto
01:50
Showcase
01:50
Estructura inicial
01:52
Creando el servicio de configuración
08:00
Creando un pipe para recoger datos de la configuración
01:20
Creando el JSON que cargaremos inicialmente
02:03
Cargar la configuración inicialmente
02:50
Testeando nuestra configuracion
05:55
Publicando nuestro servicio
01:30
Requirements
  • Es necesario tener conocimientos intermedios o avanzados de Angular
  • Es necesario utilizar una versión de Angular 6 o superior
Description

Muchos desarrolladores de Angular utilizamos bibliotecas de terceros como Angular material, primeng, etc. pero, ¿y si pudiéramos crear nuestra propia biblioteca y compartirla con el resto del mundo? Pues esto lo vamos a ver en este curso.

Veremos como hacerlo desde 0 con angular, crearemos algunos componentes, pipes, servicios y directivas para que veas todo el potencial que se puede sacar.

Veremos como se puede subir a github y a npmjs y como se puede hacer documentación automáticamente con ComposeDoc. También nos crearemos una documentación personalizada como la de primeng.

Estos son los elementos que realizaremos:

  • Join: Pipe para unir varios elementos por el separador que nosotros le indiquemos.

  • Spinner: Componente para esperar la carga de datos de la aplicación.

  • Dropdown: Componente que nos permitirá elegir una serie de opciones, teniendo integrado un buscador.

  • Toast: Componente que nos muestra mensajes de error, información, avisos o éxito. Como si fuera una notificación.

  • ClickOutSide: Directiva que nos permite realizar alguna acción cuando clicamos fuera de un elemento concreto.

  • LoadIframe: Directiva que nos permite indicar una acción al cargar un iframe con otra web.

  • Config Service: Servicio para gestionar la información de un fichero JSON. Viene muy bien para el tema de configuración.

  • Detail: Componente de un detalle base que podemos nosotros rellenar el contenido.

  • Block-List: Componente que nos permite mostrar elementos en bloques, le podemos añadir una serie de acciones.

En este curso, se realizara con Angular 8.

Se puede realizar en Angular 9, pero no es recomendable aun.

¡Disfrutar del curso!

Who this course is for:
  • Desarrolladores que quieren pasar al siguiente nivel
  • Desarrolladores que quieren globalizar su código en una biblioteca o libreria