Post Top Ad

Your Ad Spot

jueves, 25 de junio de 2020

Tutorial de componentes de AngularJS

En el tutorial anterior, obtuvimos una buena introducción a Angular JS e incluso utilizamos la interfaz de línea de comando Angular para poner en marcha un proyecto. En este tutorial, veremos un poco más de cerca la ejecución del código de una aplicación Angular y los archivos que componen los componentes en Angular. Primero agregaremos Bootstrap como una dependencia a nuestro proyecto para que podamos obtener un estilo rápido y fácil de inmediato. En la línea de comando en la raíz de nuestro proyecto Angular, podemos escribir lo siguiente.
hello-angular $ npm install --save bootstrap
Esto se carga en el proyecto y ahora es una dependencia, package.jsoncomo podemos ver aquí.

Configure angular.json para usar Bootstrap

Al agregar Bootstrap como una dependencia, ahora podemos configurar Angular para hacer uso de esos archivos. Para hacerlo, abrimos el angular.jsonarchivo y agregamos la ruta al archivo css de bootstrap que nos gustaría usar en la sección "estilos".

Bloques de construcción de componentes angulares

Un componente angular comienza como una clase creada en Typecript. Tiene propiedades que representan los datos que se pueden usar en la vista o plantilla. También puede tener métodos para calcular cualquier lógica de negocios necesaria. La plantilla es la parte de la interfaz de usuario de un componente que se escribe en html y determina lo que se ve en la página.
Bloques de construcción de componentes angulares

Pruebe algunas marcas en app.component.html

Veamos si el estilo Bootstrap tiene efecto en nuestra aplicación Angular ahora. Para hacerlo, abramos el archivo app.component.html y solo agreguemos un marcado simple de Bootstrap que encontramos en los ejemplos del sitio web de Bootstrap.
Ahora, iniciemos nuestra aplicación Angular usando el ng servecomando.
ng-serve con bootstrap
Cuando visitamos http: // localhost: 4200 / en el navegador, ¡el estilo ha tenido efecto!
aplicación angular con bootstrap instalado

index.html en AngularJS

En AngularJS, es el archivo index.html que se sirve cuando se ejecuta la aplicación. En nuestra aplicación de página única, entonces, esta es la página única que se sirve. Notarás que en realidad colocamos el código html arriba en un archivo llamado app.component.html. Entonces, ¿cómo se mostró este código html cuando cargamos la página index.html en el navegador? La CLI angular creó <app-root> </app-root> como el componente raíz de la aplicación. Es este componente el que une a toda la aplicación Angular. Podemos ver esta marca en index.html aquí.

Un componente tiene varios archivos

En Angular, cada componente tiene varios archivos asociados. Si miramos en el directorio src / app, podemos ver todos los archivos que la interfaz de línea de comando creó para que construyamos el componente principal <app-root> </app-root> .
los archivos que forman un componente angular

Inspección de app.component.ts

Lo primero que mira Angular es la propiedad del selector en el archivo app.component.ts. Tenga en cuenta que aquí hay un valor de cadena de 'app-root'. Por lo tanto, cuando Angular carga este componente, busca una etiqueta con la cadena 'app-root' correspondiente y luego reemplaza esa etiqueta con este componente renderizado.

Inspección de main.ts

Si el archivo index.html es el marcador de posición principal de la aplicación Angular, entonces el archivo main.ts es donde se inicia el punto de partida del motor de script Angular.
módulo de aplicación angular
app.module.ts
Un breve resumen de cómo se inicia Angular en función de los archivos anteriores es el siguiente.
  • Angular comienza con main.ts
  • La aplicación se inicia utilizando app.module.ts como argumento
  • Este módulo especifica buscar AppComponent al iniciar
  • Angular luego examina ese componente y encuentra el selector de raíz de la aplicación
  • Finalmente, cuando se carga index.html, <app-root> </app-root> se reemplaza con el componente representado

Componentes

Los componentes son una característica clave en Angular. Cada componente tiene su propia plantilla, su propio marcado html, su propio estilo y su propia lógica de negocios. VueJS es una buena manera de agrupar todas estas características en lo que se conoce como componentes de archivo único . En Angular, mantenemos estas responsabilidades en archivos separados. Los componentes permiten al desarrollador dividir la página web compleja en partes reutilizables. Con este enfoque, puede crear una lógica empresarial una vez y luego usarla tantas veces como desee.

Crea tu propio componente

Para comprender mejor la estructura de archivos de Angular Components , podemos seguir adelante y crear uno ahora. Ahora el componente de la aplicación que ya cubrimos es algo especial. Es el elemento raíz de toda la aplicación de una sola página y, como tal, tiene un selector en el archivo index.html. Los nuevos componentes que creamos no tendrán su propio selector en el archivo index.html, sino que se agregarán al archivo app.component.html.

Agregar una subcarpeta en / app

Para comenzar a construir un nuevo componente angular, agregaremos una nueva carpeta en la carpeta / app para guardar los archivos relacionados con el nuevo componente. Podemos imaginar que estamos monitoreando algunas máquinas virtuales en la red. Entonces crearemos un componente de máquina virtual. Eso significa que necesitamos una carpeta de máquina virtual para guardar nuestros archivos componentes.
carpeta para contener archivos de componentes angulares

Crear el archivo de mecanografiado de componentes

Con nuestra carpeta creada, ahora podemos agregar un archivo llamado virtual-machine.component.ts .
convención de nomenclatura de componentes angulares

Crear el archivo de plantilla del componente

Además del archivo mecanografiado que acabamos de crear, también necesitamos crear el archivo de plantilla asociado. Normalmente será la misma convención de nomenclatura pero con un sufijo html. Por lo tanto, también podemos crear el archivo virtual-machine.component.html en la misma carpeta.

Defina la clase TypeScript para su componente

Ahora puede comenzar a construir el componente, pero ¿por dónde empezamos? Bueno, en Angular, puedes pensar en un componente como una clase en la programación orientada a objetos. En el caso de Angular, es una clase mecanografiada que Angular luego instanciará según sea necesario. Podemos colocar el siguiente código dentro del archivo virtual-machine.component.ts .
En el fragmento anterior, hemos creado la clase VirtualMachineComponent que se exporta para que pueda usarse en otro lugar. Tenga en cuenta la convención de nomenclatura de la clase. Es el nombre del componente en sí, seguido de la palabra Componente . Ahora la forma en que Angular sabe que este es un componente es mediante el uso de @Component Decorator. Este decorador acepta un objeto donde los pares clave / valor son opciones de configuración para este componente. Tenga en cuenta que la selectorpropiedad está establecida en 'app-virtual-machine'. Así es como identificaremos y utilizaremos este componente. En otras palabras, podemos hacer referencia a este componente en archivos de plantilla que ahora usan <app-virtual-machine> </app-virtual-machine> . lostemplateUrlLa propiedad se utiliza para apuntar al archivo html que contiene el marcado para este componente. Para comenzar, podemos tener este marcado simple en nuestro archivo de plantilla para este componente.
virtual-machine.component.html
También tenga en cuenta la declaración de importación en la parte superior del archivo virtual-machine.component.ts . El decorador de componentes no es algo que TypeScript sepa automáticamente. Al agregar la declaración de importación, colocamos el nombre de lo que queremos importar entre las llaves {} . Queremos acceder al decorador de componentes, por eso lo vemos { Component }Se está importando del paquete de núcleo angular. Con esto en su lugar, el decorador @Component está disponible para mecanografiar, de modo que cuando el archivo se compila en JavaScript, puede hacerlo correctamente.
  • Puntos clave de la clase de componentes angulares
    • Elija un buen nombre: es el nombre de la clase y el componente.
    • Utiliza PascalCasing: Esto significa que cada palabra del nombre está en mayúscula.
    • YourCoolComponent: es común agregar "Componente" al nombre de la clase.
  • exportar palabra clave
    • La palabra clave exportar hace que la clase esté disponible para ser importada en otra parte de la aplicación.
  • Los datos se almacenan en propiedades de clase.
    • Use el tipo de datos correcto.
    • Establezca un valor predeterminado si es necesario.
    • siga la convención camelCase.
  • La lógica está en los métodos.
    • Use camelCase en los métodos que se usan para agregar lógica o realizar acciones para el componente.

¡Registre nuestro nuevo componente!

¡Puede sentirse tentado a utilizar su nuevo componente de inmediato! Antes de poder hacerlo, debe informarle a Angular sobre el nuevo componente y que está listo para usar. Para hacer esto, el componente debe estar registrado en el archivo app.module.ts .
Las adiciones resaltadas al archivo app.module.ts anterior registrarán nuestro nuevo componente con Angular. Podemos ver que en la matriz de declaraciones, ya había un AppComponent registrado. Para agregar nuestro nuevo componente, simplemente agregamos una coma y luego el nombre de nuestro componente que es VirtualMachineComponent . Además de agregar el nombre de nuestro componente a la matriz de declaraciones, también necesitamos importar este componente como vemos en la línea resaltada.

Prueba el nuevo componente

Sabemos que los componentes nuevos no se pueden usar directamente en el archivo index.html de la aplicación Angular. Sin embargo, donde podemos usarlos es en el AppComponent ya existente. Vamos a abrir la app.component.html archivo y añadir una referencia a nuestro componente recién creado.
Ahora en segundo plano todavía tenemos ng serve corriendo. Si marca en la línea de comandos, es posible que vea que la aplicación se está volviendo a compilar ya que hemos realizado estas nuevas actualizaciones.
ng serve re compilar recarga en caliente
Al visitar el navegador, nuestro componente recién creado se muestra en la pantalla. ¡Excelente!
componente personalizado angular js

Resumen del tutorial del componente AngularJS

La idea de Componentes existe en todos los marcos de front-end populares. Como desarrolladores, tenemos el objetivo de crear contenedores enfocados de presentación de diseño y lógica de negocios reutilizables. Esto se logra en forma de componentes. Con Angular, hemos aprendido que el componente raíz de toda la aplicación es <app-root> </app-root> . Esto se crea para usted cuando crea su aplicación Angular por primera vez utilizando la CLI Angular. No queremos modificar este componente directamente, pero podemos crear nuevos componentes a los que se pueda hacer referencia dentro del componente raíz de la aplicación que lo contiene. Para hacer esto tomamos los siguientes pasos.
  • Cree una nueva carpeta con el nombre del nuevo componente
  • Se agregó un archivo de tipografía utilizando el nombre del componente en esta carpeta
  • Se agregó un archivo de plantilla html que también usa el nombre del componente
  • Use el decorador @Component para configurar el componente
  • Se agregó el marcado html al archivo de plantilla
  • Registrado el nuevo componente en la matriz de declaraciones de app.module.ts
  • Hizo uso del nuevo componente usando <app-virtual-machine> </app-virtual-machine>
A continuación, veremos la CLI angular para ayudar a crear componentes y hacer el trabajo pesado por nosotros.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas