Generación de directivas y pipes en Angular

Name: Generación de directivas y pipes en Angular
Author: Michaela Ochnich

Este capítulo abarcará las directivas estructurales, las directivas de atributos y las tuberías. Presentará las directivas y tuberías incorporadas…

Preview the first lesson free — get full access to all 3 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

Esta lección le mostrará cómo crear una tubería personalizada. En este caso, una tubería que calcula y muestra el promedio de una matriz. Las tuberías se utilizan en plantillas angulares. para alterar los datos en un formato diferente antes de mostrarse al usuario. Angular proporciona un par de tuberías integradas diferentes para manejar el formato de datos para tipos populares como octavos, moneda o porcentajes, así como carcasa para cuerdas. A veces, es posible que deba crear una tubería personalizada para manejar el formateo de datos repetidos para sus casos de uso específicos. La CLI angular proporciona un esquema para crear estas tuberías personalizadas. Entonces, en una ventana de terminal en el directorio de la aplicación, puede ejecutar el comando: ng generate pipe, y luego el nombre de tu pipa. Entonces, esta tubería tomará una serie de números. y luego generar el promedio de esa matriz. Y este comando generará dos archivos diferentes: uno para la clase de tubería y luego otro es el archivo de prueba. También modifica el archivo app.module para declarar la tubería que acaba de generar por lo que se puede utilizar en la aplicación. Entonces, abriendo el archivo de clase de tubería que se generó, y eso estará debajo de la carpeta de la aplicación. Entonces, el archivo tiene este decorador de tuberías aquí, y luego el selector que se establece aquí en los metadatos así es como se llamará a esta tubería desde la plantilla. Entonces este método de transformación que se define aquí es el método que Angular va a llamar cuando encuentra esta tubería. El primer parámetro, valor, es lo que se pasa a la tubería. En este caso, será la matriz de números. Y aquí establezco ese tipo para el valor. También se pueden definir parámetros opcionales para configurar cómo transformar este valor. Entonces, para esta tubería, agregaré una variable llamada round, cuál será el número de lugares decimales para redondear el promedio a. Y estableceré el valor predeterminado para este parámetro opcional a dos. A continuación, agregaré el código a este método que calcula el promedio de la matriz. Así que aquí creé una variable para contener la suma de los elementos. e inicializó eso a cero. Y luego recorriendo cada elemento de la matriz, va a agregar el valor de ese elemento al total. Y luego al final divide ese total por la longitud de la matriz de valores. Y luego para completar esta función, solo devuelve ese redondeado promedio. Así que ahora, con la tubería personalizada completa, Abriré esa clase de componente de la aplicación principal y definir rápidamente una matriz de números aleatorios para usar. Y luego en la plantilla, Pasaré esa matriz a la tubería personalizada. Y cambiando al navegador, puede ver que el promedio calculado se muestra aquí, y se redondea a los dos decimales predeterminados ya que no pasé ese parámetro opcional. Ahora volviendo a la plantilla, Pasaré ese parámetro opcional y aquí lo pondré en cuatro. Y ahora volviendo al navegador, ese promedio ahora se muestra redondeado a cuatro lugares decimales en lugar de los dos predeterminados. Así que eso es todo para esta lección. sobre la creación de una tubería personalizada. Y en la próxima lección, aprenderá a crear una directiva de atributos personalizados.

Intermedio Proveedor : Michaela Ochnich 3 lecciones · 18m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

Este capítulo abarcará las directivas estructurales, las directivas de atributos y las tuberías. Presentará las directivas y tuberías incorporadas proporcionadas por Angular. También demostrará cómo crear su propia clase de tubería utilizando la CLI, así como una directiva estructural y una directiva de atributos.

Lo que aprenderás

Entender cómo funcionan las directivas y tuberías de Angular, incluyendo directivas estructurales, directivas de atributos y tuberías
Usar las directivas y tuberías integradas proporcionadas por Angular
Crear una clase de tubería personalizada usando Angular CLI
Crear una directiva estructural personalizada
Crear una directiva de atributo personalizada

Puntos clave

El capítulo cubre directivas estructurales, directivas de atributos y tuberías en Angular.
Angular proporciona directivas y tuberías integradas que este capítulo introduce.
Angular CLI puede ser usado para generar una clase de tubería personalizada.
Los estudiantes construyen su propia directiva estructural y directiva de atributo durante el curso.

Preguntas frecuentes

¿Qué cubre este curso?

Cubre directivas estructurales, directivas de atributos y tuberías, incluyendo las directivas y tuberías integradas proporcionadas por Angular y demuestra cómo crear tu propia clase de tubería usando CLI así como una directiva estructural y una directiva de atributo.

¿Qué aprenderé a construir en este curso?

Aprenderás a crear una tubería personalizada, una directiva estructural personalizada y una directiva de atributo personalizada, y a entender cómo funcionan las directivas y tuberías de Angular.

¿Qué lecciones se incluyen?

El curso incluye tres lecciones: Creación de una Tubería Personalizada, Creación de una Directiva de Atributo y Creación de una Directiva Estructural.

¿Qué habilidades se asocian con este curso?

El curso se relaciona con Angular (Framework Web), Angular CLI, Componentes de Angular, Angular Material, Angular UI y Ng Controller.

¿El curso utiliza herramientas específicas para crear una tubería?

Sí, demuestra cómo crear tu propia clase de tubería usando Angular CLI.