¿Qué te parece si vemos los comandos del CLI o creamos tu primer componente en Angular?
Vamos a ver los comandos.
Vamos a ver los comandos entonces.
Vamos un momento a la web de la documentación, por favor.
A la web de la documentación.
O si quieres lo buscamos en Google directamente, que será mucho más fácil.
Sencillamente buscamos Angular CLI.
Angular CLI, ¿vale?
Sí.
Y ya está.
Y nos tiene que salir el CLI.angular.io.
¡Oh, qué bonita!
Muy bonita.
Aquí sencillamente nos da los pasos que hemos llevado a cabo ya, cómo instalar el CLI.
Sí.
Estos cuatro pasos los he hecho, ¿eh?
Exacto.
Tú el último lo has hecho a tu manera, pero muy bien.
Sí, bueno, porque habían puesto un package JSON ahí.
No, me gusta.
Eso me gusta mucho.
Fíjate que aquí en la web tenemos el comando ng-new para generar un nuevo comando.
El ng-generate, que es el que más vamos a utilizar cuando estamos desarrollando.
Porque con el ng-generate podemos generar desde los componentes, los módulos, etcétera, etcétera.
Servicios.
Exacto.
Todo.
El ng-generate, ya hemos comentado que sirve para arrancar nuestro servidor de manera local en desarrollo.
Y lo último de test y lint.
Bueno, para testear y para lintar el código.
Vale.
Fíjate que en la parte, en el menú, la parte superior, documentación.
Ah, mira, aquí, click command.
Sí, gracias, Miguel Ángel, perdón.
Nada.
Pues, ¿en qué parte estás? Baja un poco más, por favor.
Sí, aquí, sí.
Basic workflow.
Como podemos ver en el...
Si remarcamos esta parte de aquí del ng-generate, podemos ver la ayuda.
De hecho, lo...
¿Lo vamos a hacer, esto?
Sí.
Venga.
Lo voy a hacer aquí en otra...
Solo para ver.
Pues, supongo que esto nos dará...
¡Wow!
Sí.
A veras.
Vale.
Esto es para generar, ¿no?
Esto es para generar.
Y nos dice todas las opciones que podemos...
Los flags, es que no sé cómo...
Sí, flags.
Sí.
Que le podemos pasar...
Parámetros.
Parámetros.
Parámetros.
Gracias.
Options.
Mira, le llaman options.
Gracias.
Que le podemos pasar a este comando cuando lo vayamos a utilizar.
Por ejemplo, si utilizamos el ng-generate y decimos que queremos generar un componente,
tenemos que pasar o componente, tal como te lo indica por aquí.
Sí.
Component.
Component o la C directamente.
Ah.
Si queremos hacer una prueba tan solo, esa opción me gusta mucho, la drive...
Drive run.
Exacto.
Drive run.
Que te simula la ejecución, por ejemplo.
¿Bien?
O sea, generate, aquí ya puedo...
Bueno, me has dicho C.
Sí, pero es ng...
¿Cómo es?
Ng, sí, pero al principio tienes una R.
Ay, sí, sí, perdón.
Ng.
Sí.
La...
Generate.
Es que esto, la versión corta, eso lo da G.
Ah, bueno.
Bueno, vamos a hacer la larga para que se vea.
Vale.
Luego, component.
Y luego, si es drive run, esto sirve para que simule que lo hace, pero no lo hace.
Correcto, pero te falta el nombre del componente, sencillamente.
Aquí pondríamos el componente home, por ejemplo.
Vale, home.
Y presionamos Enter.
Y esto como que va a hacer...
Vale.
Qué bueno.
Te dice, mira, he creado esto, pero en realidad no lo ha creado.
Pues sí que lo ha creado ahora.
Ah, no.
The drive run flag means no changes were made.
Ah, no, no, no.
No, no, no.
Sí, sí, sí.
Perdón, perdón.
Exacto.
O sea, es que no ha escrito en disco esto.
Exacto.
Lo que haría es esto.
Crear, como hemos dicho, cuatro ficheros.
Vale.
Estilos.
TDS, HTML, I, Testing.
Y modificaría el módulo principal de la aplicación, que es el app module, que es el que vamos a ver ahora.
Enseguida.
Vale.
¿Lo creo, de verdad, o no?
Sí, creo, ¿no?
Quito el drive run, ejecuto exactamente lo mismo y vamos a ver cómo me genera esto en nuestro archivo.
De hecho, se ha vuelto a renderizar la aplicación.
Cada vez que hay un cambio en nuestro código, vuelve a generar todo el paquete.
Vale, pues vamos a ver aquí ahora, mira, ya veo aquí que me ha creado una nueva carpeta llamada home.
Me ha creado HTML, SCSS, el spec y el TypeScript.
Y aquí tenemos nuestro primer componente.
Nuestro primer componente, que sencillamente hace lo mismo.
Llama la clase de component al principio, pero ahora, si te fijas, tenemos algo diferente, que es el onInit.
OnInit.
Que esto nos permite utilizar el método ngOnInit, que es parte del ciclo de vida de los componentes en Angular.
Ay, ay, ay, eso me suena a react.
Qué guay.
Sí, y es el primer componente que se ejecuta antes del View.
Sí, no recuerdo mal, sí.
Antes del View.
Luego del constructor viene el ngInit y luego viene otro que se llama ngAfterViewInit o algo por el estilo.
Vale.
Normalmente aquí solemos, si necesitamos conectarnos con un servicio o cualquier otra cosa, lo hacemos aquí en el onInit.
Correcto.
Ok, vale.
Bueno, entonces, ¿cómo puedo ver este componente?
Bien.
Esto me interesa.
Bien.
Me ha creado esta carpeta, me ha creado un HTML, ah, mira, que ya pone HomeWorks, o sea, al menos podríamos ver esto.
Exacto.
Pues con eso ya estaría.
Lo primero que debemos hacer, Miguel Ángel, teniendo en cuenta que nuestros queridos, bueno, no son televidentes.
Espectadores.
Espectadores.
Igual no saben cómo llamar un componente.
Entonces, vamos a mostrar cuál es el selector de este componente.
Vale.
Vamos al fichero.ts.
Vale, telahome, homecomponent.ts.
Y aquí tenemos que el selector para este componente es app-home, que es este que está aquí.
Que como te he dicho, lo podemos modificar.
Incluso podemos modificar que por defecto no empiece por app, sino que empiece por algo específico.
Me gusta.
Me do home.
Me do home.
Entonces, ahora, si guardamos, vamos al componente principal, que es el app.component.html.
Al HTML.
Sí, al HTML del principal.
Y vamos a hacer un poco de limpieza aquí.
Sí, porque aquí hay un montón de cosas.
Vamos a limpiarlo todo.
Todo.
Pues absolutamente todo.
¿Hasta el router?
Todo.
Adiós, router.
Adiós.
Hasta luego.
Hasta luego.
Ahora, llama a tu componente, tu selector, por favor.
Que es midu home.
Perfecto.
Esto no se verá nada porque hemos hecho un cambio en el TS que debemos cambiar, ¿no?
Vale.
El cambio que hemos hecho en este TS, que es midu home.
¿Y dónde tengo que cambiar más?
¿En el app?
En el app.
Vale.
Porque recuerda que hemos modificado su, en el app.component.ts.
App.component.ts.
Sí.
Aquí, ¿qué ocurre?
Nosotros hemos dicho que el template sea este HTML que tenemos aquí local.
Ah, vale.
Él no está utilizando el HTML.
Que hemos modificado ahora.
Exacto.
Tenemos que volver a poner este URL.
Exacto.
Y aquí esto era básicamente . . .
Era app.
Ah, bueno, directamente era app.component.html.
Correcto.
Vale.
Es como la ruta, que en realidad es el archivo.
Falta un punto barra.
Ah, punto barra, vale.
O sea, que hay que poner punto barra como indicarle en esta misma carpeta el archivo app.component.html.
Y ahora, si guardamos, deberíamos tener un cambio en el frontend, que es el app works.
O sea, aquí.
Eh, home works.
Ah, home works.
Sí.
Vale, vale.
O sea, que ya lo tenemos ahí.
Sí, ya tienes tu componente.
Ya estoy reutilizando mi componente.
Vale.
Tengo que decir una cosa.
Adelante.
Hay una cosa que me ha gustado mucho.
¿Cuál?
¡Ay, atención!
Hay una cosa que me ha gustado mucho, que es artimágica, por lo que veo.
Y es el hecho de que yo tengo este componente aquí, y solo utilizando el selector, ya le puedo utilizarlo en otro componente.
Sin importarlo.
Sin importarlo.
Este comportamiento se puede modificar, por supuesto, pero eso es por defecto y ya lo puedes reutilizar en cualquier lugar.
Eso me ha gustado.
Lo voy a reconocer.
Luego negaré que he dicho esto.
Pero me parece muy guay lo que me genera dudas.
Me genera dudas.
¿Qué pasa si hay dos selectores iguales?
No puede haber dos selectores iguales.
O sea, da un error.
Sí.
¿No?
Vale.
Interesante.
O sea, que ya te dice, oye, este selector ya está utilizado.
Take the script ya va a petar y decirte, aquí algo falla.
Muy bien.
Bueno, pues entonces, con más razón todavía.
Sí.
Y si es un selector...
Ah, claro.
Entonces, por eso entiendo que a lo mejor esto es como un prefijo para evitar...
Yo estoy hablando aquí solo, ¿eh?
Pero para ver cómo voy a entender esto.
Hombre, solo no.
Estoy yo escuchando.
No, no.
Quiero decir que estoy haciendo preguntas aquí.
Claro.
Es que si importas componentes externos de una tercera...
No sé, una librería externa.
Sí.
Que son componentes de Angular.
Sí.
Claro, ¿qué pasa con esos selectores para evitar que colisionen con los estudios?
Normalmente, hay una regla que es que todo empieza por ng.
Si te fijas...
Bueno, no.
Tú no te puedes fijar porque no utilizas Angular.
Pero hay una adaptación, podríamos decir, de Bootstrap para Angular.
Que lo puedes utilizar como si fuese el propio Angular.
Se llama ng-boostrap.
Ng-x-boostrap.
Y hay como ese acuerdo de que utilizamos ng-y y tal, y luego el nombre.
Con lo cual es difícil que se machaquen uno con otro.
Ya, pero si por ejemplo tuviéramos aquí ng-image.
Esto ahora no...
¿Debería pasar nada?
No, ahora no pasaría nada.
Pero si existe una, pues debería decirte que ya existe.
Vale, vale.
Bueno, pero está bien, está bien.
Me ha gustado eso de que haya sido así mágico.
No tienes que importarlo.
Esto está obvio.
Muy bien.
Esto está obvio.
¿Quieres que hagamos algo más?
Vamos a ver el fichero, ¿qué te parece?
Sí.
El app.module.
El app.module.
Que este lo ha tocado antes, ¿no?
Exacto.
Y supongo que aquí es donde ha pasado la magia, en realidad.
Yo creo que se están importando aquí todas las cosas, ¿no?
Hombre, claro.
Si en algún lugar se importa.
Sí, sí, sí.
No, está claro, está claro.
Pero que es magia, pero por qué...
Pero no lo tienes que...
A menos que no vayas a hacer algo muy específico.
No lo tienes que importar a ese componente que lo vayas a hacer.
Eso está bien, ¿no?
Porque no tienes que importarlo en cada componente donde vas a usar, sino que es un solo punto.
Exacto.
A menos que no vayas a hacer algo muy específico.
Vale.
Más avanzados ya sí que veremos que hay que importar el formulario.
Vale.
Míralo.
Ah, perdón.
Me he bajado ya.
Spoiler.
Ponlo, por favor, con el control B para que lo veamos.
Sí.
Ahí.
Bien.
Si empezamos desde el principio, pues lo típico.
Hay unas importaciones.
Sí, veo que se está importando Browser Module.
Sí.
De Platform Browser.
Sí.
El NG Module, que es el protagonista aquí totalmente, este Decorator.
Todos los componentes que vayamos a declarar deben estar bajo su manto, podríamos decir.
Aquí en el apartado de declarations, si te fijas, hay dos declaraciones de componentes y todo componente que creemos tiene que estar aquí, bajo el manto del NG Module, de este Decorator.
Automáticamente el CLI lo hace.
Como has podido ver, nosotros no hemos tocado nada de esto, pero en caso de que alguien tenga mucho tiempo y quiera crear componentes manualmente, pues que recuerde que lo tienen que hacer aquí.
Vale.
Luego, la otra importación...
Perdón.
No, tenía una duda.
Adelante, por favor.
Si yo tuviese 50 componentes en mi aplicación...
¿Esto es en acción?
¡Guau!
Esto es en acción.
¡Ostras!
A ver, está bien, ¿eh? Pero me imagino que este archivo es muy tocho, ¿no? Luego...
Luego, sí. Luego crece, pero ten en cuenta que la bundleización, si se puede decir así, de Angular es cada vez mejor.
Y no es porque yo sea fanboy Angular. Es que el rendimiento cada día se está trabajando sobre todo en las versiones nuevas.
No hay ningún breaking change. Pero sí que te fijas que cada vez el bundle pesa menos. Ahora, a partir de la versión 6, hacemos dos bundles distintos.
Uno para navegadores antiguos, otro para nuevos, porque no tiene sentido tener cosas donde no necesitamos, etc.
Claro, etc.
Totalmente. Vale, vale. Muy bien. De hecho, luego podemos hacer algún ng-build a ver qué nos genera.
La otra importación que tenemos es el app routing module, que sencillamente es el módulo de rutas, que luego lo veremos más adelante.
Y que este módulo, como todos los módulos que vayamos a utilizar en nuestra app, se tienen que inyectar dentro de los imports.
Que es el segundo, es un, lo diré, una propiedad que recibe como parámetro un array de módulos.
Ok.
En providers. En providers inyectaremos nuestro service, por ejemplo. Cuando creemos un service, lo inyectaremos aquí.
Y esta parte de bootstrap no se...
Que no tiene nada que ver con bootstrap, me he imaginado, ¿no?
Exacto. Muy bien.
Hombre, me lo he imaginado porque mal empezaría la cosa.
Esto es increíble. Pero es que yo no quiero utilizar bootstrap.
Bootstrap es como el punto de entrada, ¿no?
Correcto.
Es por donde empieza.
Exacto. Y como puedes ver, empieza en el app.component.
Vale, vale.
Por último, se exporta esta clase que se llama app module.
Hasta ahora, ¿qué te ha parecido esta introducción?
¿Qué me ha parecido? Vamos a ver.
Me han gustado cosas. Entiendo por qué le gusta mucho a la gente.
Porque tiene mucho de generar componentes así fácilmente que ya te crea mucho el boilerplate.
Aunque le veo que tiene por ahí boilerplate que no me termina de encajar mucho.
Sí.
De parte de la magia, por ejemplo, aquí en las rutas, ¿no?
Pues veo estas líneas que tienen su significado, pero es un boilerplate que como que tiene que estar ahí.
Sí.
¿Sabes? Y...
Pero me gusta, ¿eh? Me gusta.
Me ha gustado mucho los impos mágicos estos.
Luego con selectores. Eso me ha sorprendido y me ha gustado.
Me gusta esto de que esté separado el componente como lo generas y tomas.
Los estilos, el template, el componente y el testing.
Correcto.
Me está gustando.
Te está gustando todo.
Me está gustando.
Me alegra.
Tengo que decirme una cosa.
Adelante.
En realidad, adelante.
Yo sí que toqué Angular, sobre todo con la versión 1 de Angular.
Pero no recuerdo que fuese así.
De hecho, parecía que era mucho peor que todo esto.
Lo que ocurre, Miguel Ángel, es que la versión 1 hasta la 1.7, si no recuerdo mal, que fue la última,
era algo distinto.
Escribía, era todo JavaScript y era totalmente un modelo y paradigma de programación distintos.
Y no era nada que ver con esto.
De hecho, la versión 2 y la 4 aún son muy distintas a estas versiones.
A partir de la 4, yo creo que Angular empieza a hacer las cosas bastante bien y empieza a escuchar la comodidad,
que es lo más importante.
Y con la versión 5, 6 y 7, ya es bastante fácil.
Viene todo, como has visto, bastante estructurado para que hagas las cosas bien.
Y yo creo que se nota mucho a la hora de desarrollar.
Muy bien.
He creado, al final, dos componentes y todo.
Sí, el Home y el 404.
Y has modificado selectores y demás.
Y has roto un montón de cosas.
Hemos, hemos, hemos.
Incluyeme, por favor.
Bueno, pues si quieres, lo podemos dejar hasta aquí.
Sí, ¿no?
Me parece que para una introducción es bastante interesante.
Y al siguiente, pues podemos intentar crear algún componente que haga algún fetch a una API.
O que nos pide a la gente, si nos ve a alguien y alguien tiene, que sea de iniciación, que yo quiero seguir aprendiendo Angular.
Pues no sé, que nos den sus ideas sobre qué le gustaría ver y lo hacemos.
Totalmente.
¿Vale?
Yo estoy abierto a escuchar opciones.
Muy bien.
Oye, muchísimas gracias.
Me ha encantado.
A ti, mira.
Y te lo agradezco que has venido.
Gracias.
Que hayas hecho aquí de profe y que he aprendido algo más ahí en este domingo.
Pues nada, chicos, ya sabéis, Bezael.
¿Dónde te pueden seguir, Bezael?
Me pueden seguir en Twitter con Bezael-Dev.
También estoy en YouTube como Dominicode.
Y en nuestra web dominicode.com también.
Muy bien.
Que sepáis que pronto en Dominicode van a pasar cosas.
Es un spoiler.
Sí, cosas, grandes cosas.
Grandes cosas.
Cosas interesantes.
Así que ya sabéis, seguidle.
Y nada, chicos, si os ha gustado, ya sabéis, le dais like, os suscribís, le dais a la campanita,
dejáis un comentario y nos vemos en el siguiente.
Hasta la próxima.
Hasta luego.
Chao.
Chao.