Que son los componentes en angular? ...Los componentes son los bloques básicos de construcción de las páginas web en Angular 6, para entenderlo de una manera sencilla, puede ser una barra de navegacion con sus link, un formulario de inicio de sesion, uno de registro...etc que van a interactuar con nuestro proyecto. Angular cuando creamos nuestro proyecto inicial, trae un componente por defecto el app.component.ts (ts es por Typescript el lenguaje con el que esta escrito)
Como se ve en la imagen hay 4 archivos destinados a un componente, el css para darle estilo, el html donde vamos a definir nuestra estructura web, el app.component donde va la logica del mismo, y el spect que es para testing.
Entonces si quisieramos crear un componente nuevo por ejemplo un formulario de inicio de sesion deberiamos escribir en la consola el siguiente comando
que es una abreviacion de generate component .... ese comando lo que hara es crearnos un directorio en el app con el nombre del componente por ejemplo "inicio" y dentro del los archivos mencionados antes.
Como se observa en la imagen cree un componente desde la consola y se crea automanticamente una carpeta con los 4 archivos. Ahora si vamos a la carpeta y seleccionamos el inicio.component.html veremos una estructura web
Como podemos mostrar entonces el componente recien creado?, simple solo tenemos que llamarlo desde su selector, que es el selector ? para explicarlo de una manera sencilla seria como un tag clasico de html, como un <div> <html> etc... es la manera en que le indicamos a Angular que queremos mostrar ese componente (o bloque de estructura) , que nombre tiene este selector bueno podemos ir al archivo inicio.component.ts y ahi veremos el nombre con el cual se ha creado, por defecto siempre le pone el nombre de app-nombre_del_componente, en mi caso seria app-inicio como se muestra en la imagen.
Si quisieramos personalizar este componente podriamos hacerlo desde el CSS darle un estilo propio, y cambiar la estructura en el inicio.component.html por ejemplo poner un formulario de inicio de sesion personalizado.
Como hacemos para que este componente se visualice en mi pagina. En principio como mostre en el articulo anterior debemos hacer correr el servidor local que Angular trae incorporado con la siguiente linea
abrir el navegador y escribir localhost:4200 y vamos a ver nuestra pantalla de inicio de angular recuerden que angular es un framework SPA o sea Simple Page Aplication es una sola pagina que se ejecuta todo de ahi y los componentes interactuan siempre ahi ...(eso creo jejeje) en fin ... para mostrar nuestro nuevo componente basta con ir al app.component.html y escribir el nombre del selector en mi caso seria <app-inicio></app-inicio> con esa linea lo estaria mostrando como se carga en la pagina dejo una imagen para visualizar.
y en la pantalla del navegador se veria de la siguiente forma solo faltaria darle estilo y estructura html.
Bueno espero que les haya gustado todavia no he subido el video a youtube de este capitulo, si les gusto comenten y dejen puntos!!!!
En el proximo voy a explicar Routing (manejar las rutas de los componentes) e integrar Bootstrap a nuestro proyecto!!!
Como se ve en la imagen hay 4 archivos destinados a un componente, el css para darle estilo, el html donde vamos a definir nuestra estructura web, el app.component donde va la logica del mismo, y el spect que es para testing.
Entonces si quisieramos crear un componente nuevo por ejemplo un formulario de inicio de sesion deberiamos escribir en la consola el siguiente comando
ng g c nombre_del_componente
que es una abreviacion de generate component .... ese comando lo que hara es crearnos un directorio en el app con el nombre del componente por ejemplo "inicio" y dentro del los archivos mencionados antes.
Como se observa en la imagen cree un componente desde la consola y se crea automanticamente una carpeta con los 4 archivos. Ahora si vamos a la carpeta y seleccionamos el inicio.component.html veremos una estructura web
<p> inicio works! </>
una leyenda a modo de indentificarnos que cuando lo llamemos y nos muestre el mensaje esta funcionando correctamente.
Como podemos mostrar entonces el componente recien creado?, simple solo tenemos que llamarlo desde su selector, que es el selector ? para explicarlo de una manera sencilla seria como un tag clasico de html, como un <div> <html> etc... es la manera en que le indicamos a Angular que queremos mostrar ese componente (o bloque de estructura) , que nombre tiene este selector bueno podemos ir al archivo inicio.component.ts y ahi veremos el nombre con el cual se ha creado, por defecto siempre le pone el nombre de app-nombre_del_componente, en mi caso seria app-inicio como se muestra en la imagen.
Si quisieramos personalizar este componente podriamos hacerlo desde el CSS darle un estilo propio, y cambiar la estructura en el inicio.component.html por ejemplo poner un formulario de inicio de sesion personalizado.
Como hacemos para que este componente se visualice en mi pagina. En principio como mostre en el articulo anterior debemos hacer correr el servidor local que Angular trae incorporado con la siguiente linea
ng serve
abrir el navegador y escribir localhost:4200 y vamos a ver nuestra pantalla de inicio de angular recuerden que angular es un framework SPA o sea Simple Page Aplication es una sola pagina que se ejecuta todo de ahi y los componentes interactuan siempre ahi ...(eso creo jejeje) en fin ... para mostrar nuestro nuevo componente basta con ir al app.component.html y escribir el nombre del selector en mi caso seria <app-inicio></app-inicio> con esa linea lo estaria mostrando como se carga en la pagina dejo una imagen para visualizar.
y en la pantalla del navegador se veria de la siguiente forma solo faltaria darle estilo y estructura html.
Bueno espero que les haya gustado todavia no he subido el video a youtube de este capitulo, si les gusto comenten y dejen puntos!!!!
En el proximo voy a explicar Routing (manejar las rutas de los componentes) e integrar Bootstrap a nuestro proyecto!!!