Bien, en el ejemplo anterior creamos nuestro Nordberg, nuestro menú para nuestra página, pero la
incluimos en duro dentro del html del app component.
La idea es tener un componente separado que no esté tan acoplado al componente principal.
Entonces la idea es crear desde cero.
Vamos a ver diferentes formas para crear componentes, ya sea de forma automática utilizando la consola
de Angular.
O bien crear cada componente, la clase, las vistas de forma manual, archivo por archivo.
Y por supuesto, tenemos que configurar y registrarlo en Angular.
La idea es en el archivo vitta a component acá donde tenemos el menú de navegación en vez de tener todo
esto.
Por ejemplo, acá tener la etiqueta App Jaber o menú o como le queramos llamar la etiqueta y acá se
incluya el menú el gelder de nuestra página.
Acá va a estar el contenido principal y abajo podríamos tener por ejemplo un footer.
Por ejemplo, si guardamos acá el apreder y vamos a la consola, ejecutamos.
En Geezer menos o para abrir el navegador.
Cuando se abre la página observamos un error, ya que la etiqueta a Bieber no existe y Angular trata
de educaste componente y no lo encuentra dentro de su contenedor.
Entonces esa es la idea.
Entonces, cuál sería el siguiente paso para que el Ab7 funcione y no muestre el error?
Vamos a dejar tal como estaba.
Y vamos a crear el componente.
Lo primero, para tener un orden, una estructura, una nomenclatura recomendada, cada componente.
Se recomienda que esté dentro de un folder, un directorio, por ejemplo.
Le vamos a llamar.
Acá tenemos una carpeta y acá vamos a crear nuestra clase.
Component.
Getter component.
La forma manual es crear una clase con click derecho new file.
Es un archivo.
Le vamos a llamar Jeeter component.
Punto ts.
Y por qué este nombre?
Este nombre responde también a una nomenclatura, a un estándar recomendado en Angular.
Por ejemplo, acá tenemos una clase tipo componente de Angular que va a responder al jede de nuestra
página, que va a contener el menú de navegación y todo el contenido típico de una cabecera de página.
Entonces vamos a guardar.
Acá tenemos el jet recomponen.
Lo primero es crear la clase.
La sintaxis es con export.
Después vamos a explicar bien, pero básicamente nos permite poder exportar esta clase para que se pueda
utilizar, por ejemplo, para que se pueda registrar.
Guardar en la configuración del módulo en app module en el contenedor de Angular.
Entonces Export class y el nombre también.
Continuando con el standard y muy parecido al estándar de Java, las clases comienzan siempre en mayúscula
y compuesta.
Se separan también con mayúscula Kamel Keys y por supuesto, una clase del tipo Component tiene que
llevar o debería llevar.
Es una práctica recomendada el sufijo component y pasa lo mismo con la clase de servicio.
Por ejemplo cliente service, cliente component, cliente pipe, cliente directive getter component
y las llaves.
Ahí tenemos nuestra clase.
La clase tiene que estar anotada con un decorador component el decorador componen y también la diferencia
entre cualquier tipo de clase de angular es su decorador.
Por ejemplo, ungía recomponen vas tratado con ArruÃ componer una clase servis de Angular va a estar
anotado con la notación inyectable, es decir, un servicio que se puede inyectar mediante inyección
dependencia en componentes.
Los pipe va a tener la anotación pipe la directivas y así cada tipo de clase.
Lo que lo diferencia es su decorador, su anotación.
Justamente lo mismo como sucede en Spring para clase del tipo controladoras tenemos la anotación Controller
para la clase del tipo service.
Usamos servis para el tipo de clases que acceden a los datos.
Usamos repository.
En fin.
Y de forma genérica en spring se utiliza component.
Pero acá la filosofía exactamente la misma es poder decorar según el tipo, el rol que cumple la clase
dentro de Angular y por supuesto lo que representa y lo que hace.
En este caso es un componente y siempre con el ArruÃ, una anotación, una metadata.
Luego tenemos que importar esta anotación.
Entonces con import hacemos referencia con las llaves al nombre component.
From con comilla simple arroba, angulas, kor y puntico, entonces queremos importar la clase, guardamos
y acá tenemos que agregar los atributos, por ejemplo el selector.
De cómo hace llamar a Cheever o el nombre que queramos coma y va a tener el temple.
Podemos usar el template o template o RL.
Por ahora lo vamos a dejar en template y acá utilizamos el caracter de multi línea para colocar el contenido
HTML acá.
Entonces acá pueden escribir todo el contenido HTML en vez de usar una vista, una plantilla HTML.
Por supuesto, vamos a ver las dos formas.
Primero, contemplaré para ver lo más simple.
Se recomienda cuando son HTML muy básico, de 3 a 5 líneas como máximo.
Pero así son más de 5 líneas.
Es mucho mejor ya tener un archivo separado, una vista utilizando template °l, pero por ahora lo vamos
a dejar de esta forma.
Y para el ejemplo, por ahora vamos a tener acá el un H1.
Angular.
Spring.
Bien.
Ahí tenemos nuestro componente decorado con component, una clase export que contiene el nombre ider
y el sufijo component y tenemos que importar el decorador.
Estamos listos.
Ahora, si vamos al navegador, revisamos la aplicación y por supuesto que no hay ningún cambio.
Eso está bien, es normal.
Qué es lo que faltaría para que este componente funcione en nuestra aplicación, ya que hasta el momento
solamente hemos creado la clase.
Nada más.
Una clase dentro de proyecto, pero en ninguna parte le estamos diciendo Angular.
Acá tenemos un nuevo componente.
Tiene que desplegarlo en la página.
En ninguna parte hemos configurado nada.
Entonces, por supuesto que no va a funcionar.
Para que funcione tenemos que registrar IndyCar Angular de que existe este componente.
Para eso nos vamos a App móvil e importante.
Tenemos que primero importar import.
Justamente cuando creamos la clase se define la firma como export para que después se pueda importar
y utilizar.
Entonces sería import si fija que automáticamente reconoce la clase dentro del proyecto FROM y acá indicamos
su ubicación.
Jader Larch sería getter el directorio y el nombre del archivo, pero si la extensión solamente el nombre
del archivo getter.
Component Ahí lo tenemos y donde se tiene que registrar en declare Echols justo debajo de app component.
Acá colocamos el componente Z guardamos.
Ahora si vamos a navegador tampoco va a haber ningún cambio.
Se fijan?
No hay ningún cambio.
Todavía no pasa nada.
Y qué me faltaría?
Faltaría.
Acá tenemos el G de componer.
Faltaría utilizar el selector entonces en el lugar de nuestra aplicación, donde utilicemos esta etiqueta.
Ahí se va a desplegar el contenido y la lógica del ider component.
Si lo queremos mostrar, por ejemplo, en el app component.
HTML.
Justo acá al lado del menú.
Acá estoy usando un plan jinns el m.t que autocomplete.
Coloco el nombre de la etiqueta y me genera todo de forma automática.
Un playing muy bueno y recomendado.
Bien.
Guardamos y ahora volvemos al navegador.
Y ahí aparece Angular Spring.
Se fijan?
Entonces ahora vamos a mover todo el contenido del menú de navegación y lo vamos a colocar acá.
Volvemos al autom.
Vamos a cortar todo el NAF completamente, dejamos solamente la etiqueta Gelder, guardamos.
Volvemos al Gelder Component y quitamos el H1 y lo cambiamos por el menú de navegación.
Guardamos.
Vamos a crear acá un título del tipo String con el valor AB Angular Spring.
Y este atributo lo vamos a agregar acá.
Entonces, en vez de colocar bar, simplemente vamos a colocar las llaves de interpolación de Streak,
que justamente para imprimir o una expresión de salida se le llama interpolación de string en Angular.
Y acá colocamos el atributo título title.
Guardamos y debería mostrar en el menú App Angular Spring.
Le puedo colocar ahí un guión.
Guardamos.
Vamos a navegador.
Y acá lo tenemos.
Entonces acá tenemos nuestro menú de navegación.
Creo que el nombre que un poco un poco largo, así que lo vamos a achicar, le vamos a colocar solamente
por ahora a Pepe Angulas y después, cuando trajimos con Shrink, le colocamos la parte de Spring.
A sí, entonces está funcionando nuestro menú de navegación, un componente completamente acoplado del
componente principal del app component y en la siguiente clase vamos a separar a una vista independiente.
Es decir, en vez de tener acá todo este HTML que realmente se ve un poco complejo, quizás de mantener,
es mejor tenerlo dentro de su propia vista.
Por ejemplo, en Jeeter component punto html, pero eso lo dejamos para la próxima clase.
Quedamos hasta acá y cualquier duda que tengan la revisamos en el foro.
Hasta la próxima.