El siguiente, o lo siguiente, sería la carpeta src
Source
Source, exacto
Que es donde está toda, o se concentra nuestro proyecto realmente
Aquí la carpeta estrella es la carpeta app
Vale, wow
Que es donde viene por defecto tan solo un componente
Que es el app component
Que es el componente que en breve veremos cuando arranquemos el servidor local
¿Dónde estás ahora?
En el ts
Ah, sí
No, no, tranquilo
Yo abierto el ts
A menos que nosotros no hagamos lo, no digamos lo contrario
Cuando creamos un componente, Angular nos creará cuatro ficheros
El punto ts, que se refiere al typescript, que es donde está nuestra lógica
Está el punto spec, que son ficheros relacionados con testing
Vale
Que no veremos en este, de momento no lo veremos
Luego tenemos el fichero de estilos
Que es el, en nuestro caso, porque utilizamos el preprocesador SAS
SLS, CSS
¿Vale?
Que por ahora está vacío totalmente
Me cuesta un montón
Nada
Y tenemos, por supuesto, un fichero HTML
Ajá
Que es donde está nuestro código HTML
Ajá
Bien
Interesante
Sí, yo creo que deberíamos empezar por el HTML
Porque es bastante más básico
Y aquí dependerá de cada proyecto, lógicamente
Vale
Si puedes, por favor, poner a pantalla
Pum, gracias
Pues aquí sencillamente lo que está definiendo un div
Que muestra una imagen
Que veremos enseguida cuando arranquemos nuestro servidor local
Vale
Nada más
Aquí dependerá de tu proyecto
Pues poner el HTML, ¿no?
Ajá
Muy bien
Lo último que hay aquí
Sí, aquí había un router outlet
Correcto
Pues lo que se encargará de gestionar nuestras rutas
En caso de que utilicemos rutas al final en nuestra aplicación
Vale
Bien, si volvemos al fichero .ts, por favor
Sí, aquí lo tengo
Aquí es donde está la magia
Sí, sí, sí
Aquí yo lo he abierto antes y ya me he quedado así como
Uy, uy
Bien, vamos a ver
En la primera línea, sencillamente, se hace un import de la clase de component
Tal como se hace en React, ¿no?
Sí, exactamente
De hecho, se parece
Aquí podría poner React y
Sería lo mismo
Me sonaría
Bien
Lo siguiente que tenemos es un decorator
Sí
De component
Que aquí es donde va toda la meta de nuestro componente, en este caso
Él se encarga de crear la clase que está debajo, que se llama app component
En el componente en sí
Vale
¿No? Es como el acoplador, si se me permite la palabra
La primera propiedad, que es selector
Sencillamente es el selector por el cual podremos llamar a este componente
Lo podemos modificar aquí directamente
Tú puedes poner lo que quieras
Midudev, Live o Miguel Ángel, como quieras
Vale
Bien
Y entonces, luego, ¿cómo tendría que hacer?
Entonces, ¿así?
No
¿Sí?
Ah, ¿sí?
Cerramos
Ah, cerramos
Se autocierra
No, no, y cerramos en otro
Ah, vale
Vale
Es que yo ya
J, sé
Cerramos al principio
¿Al principio?
Aquí
¿Aquí?
Sí
Ahí, un poco extraño eso, pero bueno
Así
Así lo sería
Vale
Ok
Ah, claro
No, no, sería así
Sería así
No, tiene sentido
Sí o yo que lo he puesto mal
Vale, vale
Como una etiqueta
Como una etiqueta HTML
Exacto
Sí, sí, sí
Midudev, abre y cierra
Vale
Corre
Ok, vale
Era para
Bien
Me ha de la foto para atrás para no romper nada
Pero, vale
No, no, si queréis deja por favor el selector
Pues venga
Bien
La siguiente propiedad que tenemos es la de template URL
Que aquí indicamos
Que se va a renderizar en cuanto al HTML
Si esta propiedad fuera a secas y modificas y dejas solo template y retiras la URL
Sí
¿Listo?
Así podrías hacer HTML aquí directamente
Ah, claro
Es un poco no recomendable porque a menos que no tengas una aplicación muy básica
Pero aquí podrías hacer un, exacto, un div
Algo así
Eres un crack, eh
No, por lo que he visto aquí en el HTML
He visto que se utilizaba así
Sí
La interpolación
La interpolación esta
Que no sé si se funcionaría esto, eh
No tengo ni idea de Angular
O sea, es la primera vez que he tocado Angular
Vale
No funcionaría sencillamente porque no tenemos la propiedad name
Pero si en vez de name hubieseis puesto title
Vale
Te funcionaría correctamente
De hecho
Yo lo dejaría
¿Sí?
Sí, por favor
Ah, mira, vale
Vale, vale
Ahí
Voy a poner un h
Dos, vale
Para que se vea algo
Vale
Bien, y enseguida veremos esto en el front
La siguiente propiedad es styles y url
Que es lo mismo
Sencillamente nos indica o le indica a Angular
Qué fichero de estilos vamos a renderizar
Y aquí podría ser lo mismo
Podríamos eliminar la parte de urls
Y pintar el style
Y lo que pasa es que sería un array o un string
Un array
Un array
Si no recuerdo mal
Y aquí le podría poner esto
Sí, podemos probar
Esto nunca lo hago
Pero bueno
Creo que en template no nos va a funcionar
Porque necesitamos utilizar
En vez de comillas simples
Sí
Debemos utilizar el template string
Ah, sabes
Sí
Qué colico
Qué bueno
Muy bien
Y creo
Bueno, luego debajo está la clase
Que es donde va la lógica, ¿no?
Score class, el nombre de nuestra clase
Y dentro de esa clase
Lógicamente van los métodos que necesitemos
¿Cómo se llamaría esto?
Por ejemplo en React
Tiene algo muy parecido
Se llama prop
Pues
¿Cómo crees que lo llamamos nosotros?
Esto es una propiedad
Le llamáis prop
Propiedad
Sí, esto es una propiedad
Vale, vale
Totalmente
Muy bien
Entonces
¿Qué tal si vemos en el frontend?
¿Qué tenemos?
Vale
Guardo
He guardado los cambios, ¿eh?
Muy bien
Vamos a la terminal
Voy a la terminal
Y hemos dicho que para arrancar el servidor
Necesitamos ejecutar el comando
ng-serve
Bueno
Había uno que me gustaba
Que era start
¿No?
npm run start
Y ya
Es que ya lo va a ser
Muy bien
Muy bien
Yo aquí ya
¡Wow!
Me manejo ya con Angular
Vale
Localhost
Bueno, ya la he liado parla
Ya he roto algo
Argument of
¿Qué he hecho ya?
¿Qué he hecho?
En los styles
Que están mal
Creo
Vuelve
El tipo
Selector
Es un string
Template debe ser un string
Style
Es un array de strings
Sí, pero nos dice
Ah, no existe
Es styles
Ah
Equivocado
Mira, pero qué inteligente, ¿eh?
El compilador ha dicho
¿Te referías a styles?
Vale
Sigo aquí
Claro
Pero yo creo que es porque he puesto
Un array
Que a lo mejor
Bueno, eso lo veremos
Bueno, sí
Ahora veremos
Vale
Segunda prueba
Nervios
Arrancará
Bueno, o sea
Es que nunca
Nunca lo has hecho
Porque no es lo único
No, no
Lo he hecho alguna vez
Pero cuando quiero probar algo rápido y demás
Vale
Ahora
Tenemos que ir
Muy bien, Miguel
Bueno, lo he visto aquí
Sí, muy bien, muy bien
4200
Vamos a nuestro puerto 4200
Vale
No veo nada
¿Qué he hecho ya?
Y vamos a ver la consola
A ver qué
Sí, sí
Si nos dice algo
Sí, algo hemos hecho mal
Vale
Claro, selector
MidudevLive
Did not match any elements
No hay ningún elemento
Que
Que se llame
MidudevLive
A ver
El código
Un momento
Sí
Igual
Es que
Es que
Claro
Yo ya quiero tocar cosas
Selector
MidudevLive
Claro, porque yo he cambiado este selector aquí
O sea, es que hemos cambiado el selector del
Claro
Entonces
Del componente principal
Claro, esto era
AppRoot
¿No?
No
Ah, no, era AppRoot
El selector no era AppRoot
Ya, ya, ya
Mira
Ah, sí, AppRoot
Perdón
Era Root
Esto lo ha hecho bien
Esto ha hecho bien
Esto sí
Vale
Era AppRoot
Entonces
Claro, como lo he cambiado
MidudevLive
Yo imagino que esto tendría que cambiar en otro sitio
Bueno, es que aún no tenemos otro componente
Para cambiarlo
Que lo cambiaremos luego
Sí
Claro
Tenemos aquí
En el index HTML
Claro
Vale
Lo que ocurrió es que
En el index HTML
Que no lo hemos visto
Porque no hemos entrado aún en esto
Vale
Él necesitaba AppRoot
Que no existía
O sea, si hubiésemos dejado Midudev aquí
Tendríamos que haber cambiado el index HTML
En el index HTML
Vale, el index HTML
Voy a hacer esto grande
Básicamente es como el HTML de entrada en nuestra aplicación
Correcto
Y que lo va a utilizar para montar
Y a través de la etiqueta AppRoot
Se inyecta todo el contenido de nuestra web
Que está aquí
Claro
Aquí es donde deberíamos haber puesto
En nuestro selector Live
Y modificarlo en el componente también
Y aquí lo cambiamos
Midudev Live
Correcto
Y esto
Y ahora sí que funciona
Sí
¡Bravo!
Muy bien
Tu primer
Tu primera aplicación en Angular
Ya está
Pues no es tan difícil
No
Bueno, si me puedo tocar cosas que no sé
Sí
Pero bueno
Lo hemos solucionado rápido
Bien
Vale
Siguiendo si quieres con el fichero
index
Sí
.html
Pues aquí
Por ejemplo
Si utilizamos
Fon
Olson
O cualquier otra
Library
La podemos añadir directamente aquí
Aquí
No es
Bueno, si en algunos casos es necesario
Sí
Pero yo por ejemplo
Cuando estoy probando cosas rápidas
Pues si vengo a
En vez de hacer un npm install
De una dependencia de bootstrap
O cualquier otra
La os añado aquí
Directamente
Vale
Bien
Con el siguiente fichero
Que lo vamos a ver
Ya hemos visto la carpeta app
Hemos visto el index
En environment
O quieres que veamos assets
Primero
Assets
Que no hay nada
Porque no tenemos nada
No hay nada
Supongo que van ahí los estáticos
De la aplicación
Exacto
Muy bien
Imágenes
Necesitemos
O algún framework CSS
Que queramos importar
De manera local
A nuestro proyecto
Vale
Lo añadimos aquí
Tenemos una carpeta
De environment
Environment
Donde tenemos
Dos environment
Que sería
Desarrollo
Entre comillas
Y prod
Vale
Desarrollo me imagino
Es el que no tiene nada
El que no tiene nada
Sería este
Y si estás trabajando
Por ejemplo
Con Firebase
Pues aquí pondrías
Las key
De conexión a Firebase
De desarrollo
Y en producción
Las de producción
Lógicamente
Ten en cuenta
O tener en cuenta
Que si hacemos
Un proyecto
Con Firebase
Y solamente
Ponemos las
Las key
De conexión a Firebase
En el fichero
De dev
Cuando hagamos
El ng build
Angular te va a decir
Que necesita
La información
En producción
En producción
Vale
O sea
Que no es que
Es que hay muchos sistemas
Que si tú los tienes
En environment
Lo que hace
Es que ese es
Por defecto
Exacto
Y en producción
Lo que puedes hacer
Es sobre escribir
En este caso
No es así
En este caso
Tiene que estar
Duplicado
Digamos
En environment
Exacto
Porque normalmente
No usamos
La misma base de datos
Para desarrollo
Que para producción
Vale
Muy bien
Sí
Interesante
Siguiente
Ya
Hay ficheros
Como el de Karma
Que está relacionado
Con el test
Tenemos un
MainTS
Que
Por aquí
No hace falta
Que hagamos nada
Realmente
Es que realmente
MainTS
No hace falta
Nada
Los polyfills
Que son para
La compatibilidad
De navegadores
Antiguos
Para dar soporte
Correcto
Tenemos un fichero
De styles
Styles
Que es como el general
Global
¿No?
Correcto
Bueno
Me imagino
Me imagino
No sé
Claro
Este es
El que se carga
Como punto de entrada
De tus estilos
Si eres
Si eres
Nuevo
En esto
Te explico lo siguiente
Quizás
Digas
Pero por qué
Tengo un estilo
En un componente
Y tengo estilos
Que se llaman styles
Sencillamente
Todos los componentes
Las propiedades CSS
Que pongamos aquí
Afectarán a toda nuestra aplicación
Claro
Aquí se deberían poner cosas así
¿No?
O sea
Si tú quieres que toda tu aplicación
Tenga la fuente esta
Correcto
De hecho
Uy
Ya lo he roto
Algo
¿Por qué se ha roto?
Perdón
Perdón
He sido yo que
He vuelto a
He tirado para atrás
Los cambios del
Middle Dev
Del HTML
Vale
He puesto aquí
En el style.css
En el body
El font family
Y veo que aquí
Tengo el font family
Correcto
Que he puesto
Vale
Los estilos que querramos
Que solo afecten
Un componente
Pues lo pondremos
En ese componente
Vale
Bien
Luego
Hay pocas cosas más
Que destacar
Por aquí dentro
Miguel Ángel
Creo
Tenemos otro fichero
TSSLIN
Que ya hemos dicho
De que iba
Y no tenemos nada
Bueno
Esto es una cosa interesante
Es el hecho
Que veo
Que están muy preparados
Para hacer testing
Tanto de end to end
O sea
Ya te da
Todas las herramientas
Para hacer end to end
O unitarios
Pero veo que también
Unitarios
O sea
Están muy pensados
A que hagas test
Y te da las herramientas
Necesarias para hacerlo
Interesante
A través de la consola
Podemos evitar
Que estos ficheros
Se creen
Pasando un flag
Como hemos dicho
Al principio
Vale
Que es menos menos
Bueno ahora veremos
Lo jugando
Y no me la juego
Así
Que mi prestigio
Está en juego
Es menos menos
Menos test
Menos test
No es
Sped
Igual a false
Si no recuerdo mal
Y nos evitaríamos
Que nos cree estos ficheros
Pero si vamos a hacer
Una aplicación
De verdad
Que pensamos llevar
A producción
Pues debemos tener
Testing
Vale
Unitarios
O end to end
Depende de cada aplicación
Vale
Pues no está mal
Ya he hecho
Bastantes cositas
Así