Crea tu propia biblioteca de componente con Angular

所在平台: Udemy

课程主页: https://www.udemy.com/course/crea-tu-propia-biblioteca-de-componente-con-angular/

课程评论:没有评论

第一个写评论        关注课程

课程简介

课程名称:使用 Angular 创建自己的组件库 课程概述:在这个课程中,许多 Angular 开发者使用第三方库,如 Angular Material、PrimeNG 等,但我们将学习如何从零开始创建自己的库并将其与全世界分享。课程将从头开始,教授创建组件、管道、服务和指令,以展示 Angular 的全部潜力。我们将学习如何将库上传到 GitHub 和 npmjs,并使用 ComposeDoc 自动生成文档。此外,还将创建与 PrimeNG 类似的个性化文档。 我们将实现以下元素: - Join:一个管道,用于根据指定的分隔符连接多个元素。 - Spinner:一个组件,用于等待应用数据的加载。 - Dropdown:一个组件,允许用户选择一系列选项,并集成搜索功能。 - Toast:一个组件,用于显示错误信息、通知或成功消息。 - ClickOutSide:一个指令,当点击指定元素之外的区域时执行某个操作。 - LoadIframe:一个指令,用于在加载其他网站的 iframe 时触发操作。 - Config Service:一个服务,用于管理 JSON 文件的信息,非常适合配置主题。 - Detail:一个基本的详细信息组件,用于填充内容。 - Block-List:一个组件,用于以块状形式展示元素,并可添加一系列操作。 - Tabs:一个组件,用于在同一页面展示不同的部分。 - Resolution Service:一个服务,指示当前的屏幕分辨率(手机、平板或网页)。 - Accordion:一个组件,展开时会显示内容。 - Translate:一个服务,用于翻译文本。 - Ng-Model-Base:用于使用 ngModel 的基本类。 - Toggle:一个组件,用于激活/禁用功能。 - Modal:一个组件,用于显示模态框。 本课程使用 Angular 12 进行讲解,但也可在版本 6 及更高版本中完成。同时,我们还将学习如何管理库的版本,并通过 Visual Studio Code 将库上传到 GitHub。此外,还将了解 GitHub Packages 的使用。 希望你能享受这个课程!

课程评论(0条)

课程详情

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.Tabs: Componente para mostrar diferentes secciones en una misma página.Resolution Service: Servicio que nos indica en que resolución estamos (móvil, tablet o web)Accordion: Componente que al abrir aparece el contenido. Translate: Servicio para traducir textos.Ng-Model-Base: Clase base para utilizar nuestros componentes con ngModel.Toggle: Componente para activar/desactivar.Modal: Componente para mostrar modales.En este curso, se ha realizado con Angular 12, pero se puede realizar en versiones posteriores. A partir de la versión 6.Vemos como manejar el tema de versiones de nuestra biblioteca.También aprenderemos como podemos subir nuestra biblioteca a Github con Visual Studio Code. Además, veremos como funciona Github packages.¡Disfrutar del curso!

课程标签

0人关注该课程

主题相关的课程