[MUSIC]
Acabamos de crear nuestra primera aplicación Angular en el ejercicio anterior.
Debe estar preguntándose, ¿cómo se ve una aplicación angular típica?
¿Cuál es su estructura y arquitectura, y
cómo construimos una aplicación Angular?
Hablemos de estas cosas paso a paso, comenzando con esta conferencia.
Echando un vistazo rápido a la carpeta de la aplicación, en un editor.
Usted nota inmediatamente que la CLI angular ha creado un montón de archivos
en varias carpetas en nuestra aplicación.
¿Qué contienen estos archivos?
¿Cómo constituyen una aplicación angular?
Vamos a examinarlos paso a paso para entender la arquitectura típica de
una aplicación angular.
Como ya nos hemos dado cuenta,
aplicaciones angulares se construyen como una combinación
de HTML y TypeScript o JavaScript.
En este curso vamos a utilizar TypeScript como el lenguaje de elección para
construir nuestra aplicación Angular.
Angular en sí consta de varias bibliotecas,
algunas de ellas llamadas bibliotecas y otras son bibliotecas opcionales.
Dependiendo del tipo de aplicación Angular que esté tratando de construir,
incluirá algunos de estos en su aplicación.
Como ya hemos aprendido, Angular es un framework de JavaScript y
lo aprovecharemos para construir nuestra aplicación.
En resumen, la aplicación angular es modular en su naturaleza y constará de
varios componentes, junto con sus plantillas, que componen la aplicación.
No solo eso, estos componentes y otras partes de la aplicación Angular,
como servicios, se organizarán en módulos.
Y estos módulos, a su vez, serán utilizados por módulos de nivel superior.
Así que puede ver una aplicación Angular siendo una arquitectura modular
con un módulo raíz en la parte superior,
que toma la ayuda de otros módulos organizados en su jerarquía de modelado.
Examinemos nuestra aplicación para entender cómo se crea esto.
Antes de continuar, el módulo raíz por defecto
en Angular normalmente se denomina módulo de aplicación.
Ir a nuestro código, vamos a empezar nuestro viaje e index.html.
Así que en este archivo index.html, puede ver que tenemos el código html típico aquí,
junto con esta línea en particular que dice app-root.
Inmediatamente los reconoce, esto no parece una etiqueta HTML típica.
Así que empecemos haciéndonos la pregunta, ¿qué significa esto, y
por qué está eso incluido en la página index.html?
Como ya vimos, una típica aplicación angular
es una jerarquía de módulos con un módulo raíz.
Su aplicación Angular se inicia iniciando el módulo raíz
para iniciar su aplicación.
Entonces, ¿cómo arrancamos una aplicación Angular?
Ya vimos la página index.html, y viste un elemento allí llamado app-root.
Así que vamos a hacernos algunas preguntas más.
Un complemento de la página index.html es el archivo main.ts.
Si abre ese archivo verá que contiene un conjunto
de instrucciones de importación en TypeScript, como está escrito aquí.
No profundizemos demasiado en los detalles, pero
volveré para explicarlo en un corto tiempo.
Pero en particular,
permítanme llamar su atención sobre esta línea particular en el archivo main.ts.
Que dice PlatformBrowserDynamic () .BootstrapModule
y luego observe el parámetro aquí, que dice (AppModule).
Así que como mencioné, anteriormente el módulo de la aplicación es el nombre
típico dado al módulo raíz en una aplicación angular.
Si nos fijamos en la jerarquía de archivos,
ya verá un archivo allí llamado app_module.ts.
Vamos a visitar ese archivo en poco tiempo para ver qué contiene.
Ahora, volviendo a estas importaciones,
puede ver que vamos a tomar el ejemplo de la primera importación aquí.
Dice importar EnableProdMode desde '@angular /core'.
Entonces, lo que esto especifica es que importaremos este módulo
en particular de la biblioteca central angular.
Y de manera similar, ves el segundo diciendo importar PlatformBrowserDynamic
de '@angular /platform-browser-dynamic'.
Así que desde esta biblioteca está importando este módulo en su lugar.
Ahora, el módulo PlatformBrowserDynamic le permite iniciar
su aplicación Angular tomando su módulo raíz como parámetro.
Obviamente hay muchos otros archivos en esta carpeta y las subcarpetas allí.
No nos preocupemos demasiado por ellos en este momento.
Aprenderemos sobre algunos de ellos a medida que avanzamos en este curso.
Ahora, Angular CLI ayuda a crear esta jerarquía de carpetas y archivos
, con la configuración necesaria para
usted para poder arrancar su aplicación angular y empezar.
Hacer esto a mano es una tarea un poco tediosa.
Por lo tanto, la CLI angular simplifica la preparación
de la carpeta para su aplicación Angular.
Así que de nuevo, yendo al archivo app_module.ts.
Como mencioné, este es el módulo raíz para su aplicación Angular.
Ahora normalmente, el módulo raíz se nombraría como archivo app.module,
pero eso es solo un nombre sugerido en Angular.
Verá que muchos de los archivos que constituyen una aplicación Angular,
hay formas sugeridas de nombrar esos archivos.
A medida que vayamos a través del curso aprenderemos específicamente acerca de cada uno de estos archivos
.
Así que echando un vistazo al contenido de app_module.ts,
dentro de allí, verá un conjunto de declaraciones de importación allí.
Echando un vistazo rápido a ellos dice import {browserModule} de
'@angular -platform-browser'.
Importar {ngModule} desde '@angular /core'.
Y ngModule es un módulo angular.
Aprenderemos un poco más al respecto un poco más tarde.
Además, verá otra instrucción de importación aquí,
que dice import {appComponent} from './app.component '.
Y echando un vistazo a los archivos aquí,
ya ves un app.component.tsfileware, y
luego varios otros archivos aquí, incluyendo un app.component card.html,
un app.component.acss, y otros archivos.
Ahora, esta declaración especifica que este módulo raíz incluirá este componente,
y formará el complemento raíz de su aplicación Angular.
Una típica aplicación Angular, como vimos, consiste en una serie de módulos
con el módulo raíz como módulo primario,
que le ayuda a arrancar su aplicación Angular.
El módulo raíz es un módulo angular con una entidad, o es una clase.
Así que aquí es donde se ve el uso de una clase TypeScript aquí,
por lo que si se baja en el módulo rojo abajo aquí verá
esta declaración llamada clase de exportación AppModule.
TypeScript agrega clases a su código JavaScript típico.
Si está familiarizado con sólo ES-5 JavaScript,
entonces las clases aún no se han introducido allí, pero
las versiones más recientes de JavaScript introducirán soporte para clases.
TypeScript también tiene soporte para clases.
Así que si tienes experiencia con la programación orientada a objetos,
ya estás familiarizado con las clases.
Así que ese tipo de enfoque se está introduciendo en JavaScript con la introducción
de clases en TypeScript y futuras versiones de JavaScript.
Además notarás que esta clase tiene
un decorador Ngmodule asociado con eso.
Así que un decorador es, de nuevo, una función de
que modifica las clases de JavaScript.
Veremos el uso de decoradores en muchos lugares en nuestra aplicación Angular.
Este es un Ngmodule.
El decorador de eso le permite especificar algunos detalles sobre este módulo de aplicación
.
Así que esta función de decorador toma un cierto conjunto
de metadatos para ayudarle a describir este módulo.
Así que este objeto de metadatos aquí contiene, como puede ver, declaraciones
, importaciones, proveedores, bootstrap.
Y también contendrá exportaciones si este módulo está exportando algo que puede ser
utilizado por otro módulo.
Dado que este es el módulo raíz, no tenemos una exportación de este módulo.
Así que en su lugar solo tenemos declaraciones, importaciones, proveedores y bootstrap.
Así que aquí esta es bastante directa de entender.
Especifica que para arrancar esta aplicación angular,
necesitamos arrancar el AppComponent.
Entonces AppComponent es el componente raíz de nuestra aplicación Angular.
Además, la parte de importaciones especifica las propiedades,
viendo que todos estos módulos necesitan ser importados para ser utilizados con este módulo de aplicación.
Así que este módulo de aplicación ahora depende de estos otros módulos.
Así que estos son los módulos que se van a importar en el módulo de la aplicación como
parte de la jerarquía, de ahí la razón por la que importamos estos módulos aquí.
Así que cuando importa los módulos,
está especificando aquí diciendo que el módulo de la aplicación hará uso de este módulo.
Por lo tanto, la propiedad de importaciones especifica aquellos módulos que deben importarse o
aquellos módulos de los que depende este módulo en particular.
Las declaraciones aquí, la propiedad de declaraciones,
es la propiedad que declara las clases de vista
que pertenecen a este módulo en particular.
Entonces, las clases de vista en caso de un módulo Angular serían
en forma de componentes, directivas y tuberías.
Vamos a hablar de directivas y tuberías un poco más adelante en este curso,
vamos a hablar de los componentes en la siguiente lección.
Los proveedores especifican todos los servicios que este módulo
en particular hará uso.
Servicios de los que hablaremos con un poco más de detalle en
el módulo de la próxima semana.
Hablaremos más detalles sobre los servicios, cómo los creamos,
y cómo podemos hacer uso de ellos con nuestra aplicación Angular.
Para resumir lo que hemos aprendido hasta ahora, nos damos cuenta de que un módulo
en una aplicación Angular podría consistir en un conjunto de componentes y servicios
que se requerirán de este módulo importándolos.
Y estos serán declarados usando la propiedad de declaraciones
del decorador Ngmodule en nuestro módulo de aplicación.
Ahora, estos componentes pueden depender de
otros componentes, o servicios, o directivas, o
tuberías, como veremos en el resto de este curso en particular.
Así que con esto tenemos una idea aproximada de cómo se estructura una aplicación angular típica.
Volviendo a nuestro código, ahora es el momento de usar para examinar
este archivo app.component.ts, y el archivo app.component.html.
Que declara la plantilla para nuestro componente,
y el archivo app.component.ts,
que especifica la parte TypeScript de nuestro componente.
Ahora, lo haremos en la siguiente lección, donde trataremos con los componentes y
cómo podemos crear nuevos componentes y agregarlos a nuestra aplicación Angular.
[MÚSICA]