Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular esencial

Partes de una aplicación Angular

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una aplicación Angular se compone de varias partes. En esta lección vamos a ver las principales partes y elementos que conforman una aplicación y aprenderemos cómo funcionan e interactúan entre sí conceptos como componentes, servicios y módulos.
11:10

Transcripción

Hablemos ahora sobre las diferentes partes que conforman una aplicación Angular. Vamos a tener muchas partes dentro de una aplicación, pero vamos a trabajar principalmente con cinco de ellas que van a ser las de uso más común y tal vez las que van a tener mayor impacto dentro de nuestras aplicaciones, que van a ser: los módulos, los componentes, las plantillas, directivas y servicios. Vamos a hablar sobre cada una de ellas para que te comiences a familiarizar con sus diferentes propiedades. Comencemos por los módulos. El módulo es el punto de entrada de nuestra aplicación, va a ser lo primero que se carga al ejecutar una aplicación Angular y toda aplicación tiene por lo menos un módulo principal. El módulo, al menos en su caso principal, va a agrupar las diferentes funcionalidades de nuestra aplicación. Por ejemplo, si nosotros estamos utilizando librerías internas, librerías externas, estamos definiendo todos los componentes de nuestra aplicación, las rutas, los servicios, todos los elementos con los que vamos a trabajar se van a cargar en este módulo principal y nos va a definir cómo va a trabajar nuestra aplicación y con qué va a comenzar a trabajar. Veamos un poco un código de ejemplo de un módulo. Por ejemplo, acá vemos que estamos definiendo una serie de elementos'import'con los que vamos a comenzar a trabajar en nuestra aplicación. Tenemos un elemento que es el que define nuestro módulo y es un decorador llamado'@NgModule'. Así es como vamos a declarar que el código que estamos utilizando a partir de este momento es un módulo. Luego vamos a tener una declaración donde definimos los diferentes componentes con los que estamos trabajando, acaban ahí los componentes que nosotros hemos creado en nuestra aplicación. Luego vamos a incluir otro apartado que van a ser los'imports'o los módulos importados. Acá vamos a definir los módulos con los que estamos trabajando y los que van a estar disponibles a lo largo de nuestra aplicación para poder trabajar en los componentes. En esta parte podemos incluir tanto módulos propios de Angular como módulos externos. Finalmente, en el apartado'providers'vamos a definir los servicios con los que vamos a trabajar y que se van a mantener a lo largo de toda la vida útil de nuestra aplicación almacenando y transportando datos. Pasemos ahora a hablar sobre los componentes. El componente es el bloque central de construcción de una aplicación. Todos los elementos que nosotros tengamos de interacción o de contenido dentro de una aplicación Angular y básicamente cualquier elemento que sea interactivo va a estar relacionado directamente o se va a contener dentro de un componente. Los componentes, como son el bloque fundamental de construcción, pueden estar anidados entre sí. Podemos tener múltiples componentes dentro de una sola pantalla y a su vez tener múltiples componentes dentro de cada componente. El componente tiene un tiempo de vida útil, de hecho tiene un ciclo de vida. El componente se va a cargar en el momento en que nosotros comencemos a utilizarlo y dependiendo de la arquitectura de nuestra aplicación. Por ejemplo, si trabajamos con una ruta, un componente se va a cargar y puede, dependiendo de la configuración que tengamos, puede invocar otros componentes. Cuando dejemos de utilizar este componente, va a eliminarse y va a dejar de existir en la memoria de nuestra aplicación. Eso hace que nuestras aplicaciones Angular sean particularmente fluidas y eficientes. Es uno de los secretos que tiene Angular para mantener sus aplicaciones sin demasiada carga en la memoria y poder trabajar aplicaciones sumamente amplias, poder trabajar aplicaciones a nivel industrial sin que ejecutemos todo en memoria. Simplemente lo que estamos trabajando en el momento es lo que va a estar en memoria. Cualquier información que necesitemos almacenar, vamos a utilizar los servicios. Veamos un ejemplo de una página utilizando componentes. Si bien es cierto que esta página no utiliza Angular, podemos ver cómo utilizaría, en el caso de que lo hiciera, los diferentes componentes. Vemos que tengo subrayado en diferentes colores lo que podrían ser componentes. Por ejemplo, tengo menús de navegación, tengo áreas de contenido, cada una de ellas agrupada a partir de diferentes ideas o funcionalidades. Aunque en este caso yo muestro simplemente bloques en los cuales tenemos una sola pantalla trabajando cada uno de ellos en conjunto, cada componente trabaja por separado. Al mismo tiempo, aunque acá no se muestra, yo puedo tener componentes dentro de otros componentes. Los componentes siempre van a estar encapsulados y, como te digo, pueden comunicarse entre sí a través de "inputs", "outputs" y servicios. Vamos a ver el código general de un componente. Acá tengo básicamente el código de un componente en el cual estamos importando las funcionalidades que vamos a tener. En este caso estamos importando diferentes módulos como el'Component'y el'OnInit', que nos van a servir para poder trabajar más adelante en este componente. Tenemos el "decorator", que en este caso lo define como'@Component'y sabemos que el código que se encuentre acá va a ser un componente. Acá utilizamos un concepto llamado metadatos, que se utiliza en TypeScript, que nos permite a nosotros configurar cómo va a trabajar este componente. Acá le estoy definiendo varias propiedades como, por ejemplo, cómo voy a incluirlo dentro del código y cuáles van a ser los elementos con los que va a trabajar con la plantilla y el CSS. Luego tengo dos elementos que son importantes de mencionar, como el constructor y, en este caso, los eventos, que es el evento'ngOnInit'. El constructor va a ser un elemento que se va a ejecutar en el momento en que nuestra aplicación Angular inicializa. Eso significa que cuando carga nuestra aplicación Angular en el segundo 0, apenas tenemos acceso a ejecutarla, la información que está en el constructor se va a ejecutar. Luego vamos a tener un evento llamado en'ngOnInit', que se va a ejecutar en el momento en que carguemos nuestro componente. Nuestro componente puede entrar y salir de memoria y cada vez que entre en memoria, vamos a ejecutar este evento. Podemos ejecutar acá diferentes eventos de acuerdo al ciclo de vida de nuestros componentes. Finalmente, podemos trabajar con métodos, los cuales van a recibir, enviar y procesar información que viene tanto desde la plantilla como información externa. Esto nos lleva a otro elemento llamado la plantilla. La plantilla es la parte visual de un componente y siempre están relacionados. Generalmente vamos a tener un componente relacionado con una plantilla, que puede ser tanto externa como interna. Una plantilla, en resumen, es HTML al cual nosotros le podemos inyectar diferentes datos y propiedades de Angular. Las plantillas están controladas desde el componente y nos permiten a nosotros enviar, recibir y reaccionar a partir de la información que nos da el componente. El código base de una plantilla, como puedes ver, es directamente HTML al cual le vamos agregando cosas. Por ejemplo, acá yo estoy trabajando un HTML que tiene un párrafo al cual yo le inyecté una directiva. Esta directiva, por ejemplo, puede cambiar la apariencia del párrafo y los valores pueden ir cambiando de acuerdo a las propiedades y al flujo de la información de mi aplicación. Luego tengo también un componente, el cual estoy insertando a partir de una etiqueta que también es HTML. Finalmente, podemos trabajar con el concepto de expresiones que nos permiten desplegar valores que se encuentran en el componente a través de la sintaxis de doble llave. Hablemos ahora de los servicios. Los servicios básicamente nos permiten almacenar datos y se encuentran activos durante toda la vida útil de una aplicación. A diferencia de un componente que se encuentra únicamente activo durante un tiempo en memoria, el servicio se encuentra disponible mientras estemos dentro de la aplicación. La única forma en que se elimina la información que está en un servicio es que cerremos y volvamos a abrir la aplicación y ahí borra toda la información, porque realmente hemos eliminado de memoria completamente toda la información que se encontraba en nuestra aplicación. Los servicios pueden comunicarse con cualquier elemento que se encuentre en nuestra aplicación, pueden comunicarse con diferentes componentes, con directivas e incluso con otros servicios. Sirven para transportar la información que se encuentra entre los diferentes elementos. A manera de esquema, podemos ver acá que yo tengo diferentes componentes que entre ellos no se hablan directamente, pero pueden comunicarse con un servicio. Si el primer componente tiene un dato, lo puede enviar al servicio y cualquier otro de los elementos que se encuentren suscritos a ese servicio va a tener acceso a la información que ahora está dentro del servicio. A su vez, cualquiera de ellos puede modificar la información, volverla a enviar y una vez que se haya modificado la información, recibirla otra vez en el componente y procesar en dos diferentes elementos de nuestra aplicación los datos sin tener que romper el encapsulamiento. Veamos cómo funciona a nivel de código un servicio. Al igual que los diferentes elementos, también importamos funcionalidades y trabajamos con un decorador. En este caso, el decorador lo definimos a través de'@Injectable'. También podemos incluir diferentes métodos y tenemos constructores. La forma en que se define la sintaxis de un servicio es bastante similar a la de un componente. Finalmente tenemos las directivas. Un componente, ahora que hemos hablado de ellos, es básicamente una directiva con plantilla y una directiva es un componente que sin ella. Usualmente, las directivas no van a trabajar con plantillas aunque pueden hacerlo. Las directivas, vamos a tener dos diferentes tipos: tenemos las estructurales, que nos permiten agregar o eliminar elementos, y luego tenemos las directivas de atributo que pueden cambiar la apariencia o el comportamiento de los elementos. Veamos un ejemplo de ellas. Acá yo estoy trabajando con una directiva estructural llamada'ngFor'. Esta directiva va a cambiar el HTML que se encuentra dentro de ella y en este caso va a generar una serie de elementos, en este caso una lista, de acuerdo a las propiedades que yo le he definido dentro del código. Va a incluir una cantidad indeterminada de elementos dentro del HTML. Esto es una directiva estructural, porque va a modificar la estructura de mi código y ya no va a ser solo un elemento, en este caso un'li', sino que va a tener una cantidad, como te digo, indefinida de elementos de acuerdo a las propiedades, en este caso, que se definen dentro de la colección libros. Luego tenemos acá una directiva de atributo, en este caso'ngStyle'. 'ngStyle'es una directiva que va a modificar las propiedades de, en este caso, un párrafo por la información que se encuentra dentro de los parámetros que tengo acá definidos, en este caso va a modificar el color de fondo. Esto es una directiva de atributo que va a modificar a nivel de apariencia. Pero también puedo insertar otras directivas que van a modificar, por ejemplo, las conductas o vamos a escuchar cualquier interacción que se genere dentro de este elemento. A nivel de código, las directivas trabajan la misma sintaxis con la que hemos trabajado los diferentes elementos. Por ejemplo, tenemos un decorador, en este caso '@Directive', tenemos un selector con el cual vamos a definir cómo se va a incluir nuestra directiva dentro de una aplicación, en este caso lo incluimos dentro de los metadatos. Y también tenemos constructores y métodos para incluirla en nuestro código. Estos son los elementos principales con los que vamos a trabajar una aplicación y van a ser los elementos básicos de construcción con los que vamos a generar nuestras aplicaciones en Angular.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.