Bienvenidos.
Hoy vamos a ver la estructura de directorio del proyecto que generamos con la consola de Angular con
Angular.
Si elige vamos a comenzar desde el principio con el directorio y TUI.
Básicamente contiene todas las herramientas necesarias para realizar pruebas unitarias.
Todo lo que es testing es un mundo bastante amplio y creo que este curso está más enfocado en Spring
y en la integración con Angular.
Por lo tanto, abarcar este tema se rasca un poco del contexto del curso y lo vamos a dejar para un
próximo curso que sea específicamente de Angular.
Ahí tiene mucho más sentido, pero es bueno saber que este directorio contiene todo lo necesario para
realizar nuestras pruebas.
Bien, el siguiente directorio es el not mudables.
Acá están todas las librerías y dependencias del proyecto, como por ejemplo todo lo relacionado a dependencias
de Angular.
Detalle script reactive estrechos.
Acá está todo.
No tenemos que tocar nada.
Todo se maneja de forma automática a través del not tacas manager del npm.
Y todo esto se maneja y se registra dentro del package punto Jasso.
Acá están todas las dependencias.
Muy parecido a lo que sería el pomme kml en Spring, en Java.
Bien, luego tenemos ese REZEN.
Una carpeta muy importante.
Contiene todo nuestro código.
Todo el código fuente de nuestra aplicación es bastante amplio, así que lo vamos a dejar para una clase
completamente separada para la próxima clase.
Luego tenemos el archivo editor config.
En realidad no lo vamos a ocupar para nada en el curso, pero básicamente contiene toda la configuración
del editor.
Por ejemplo, el charse lent Tf8, el estilo de tabulación que es a través de espacios de la barra espacio,
el tamaño de la tabulación con dos espacios, en fin, configuraciones que podemos modificar del editor.
Luego tenemos el git inor es un archivo de jija del repositorio jija donde podemos subir nuestro proyecto
y compartir este archivo nos permite omitir, ocultar, ignorar archivos y carpetas que no queramos
compartir en el repositorio git, como por ejemplo la carpeta distribución dist que contiene todo el
código compilado cuando generamos el proyecto con MJI build.
Todo el JavaScript y contenido estático del proyecto.
El directorio temp.
El directorio salida de esta descri.
Las dependencias not modules.
No tiene ningún sentido compartir todas las librerías y dependencia del proyecto.
Lo importante es el código fuente, nuestro propio código y así un montón de carpetas y archivos que
podemos ocultar.
Y también podemos agregar nuestro propio archivo, nuestro propio directorio.
Pero no solamente sirve para git.
También nos permite ocultar elementos, archivos, carpetas en el editor en auto, por ejemplo, si
queremos ocultar Not modules, lo podemos hacer acá, pero para eso tenemos que activar esta configuración.
Simplemente nos vamos a la configuración del IDE del editor con control y punto y coma.
Nos vamos a package y acá tenemos que buscar el componente del menú que se llama Try View.
Nos vamos a Settings.
Por defecto aparece desactivado el joie BCS.
Ignorad fails.
Acá lo que hace es leer el archivo git inor y todas las reglas, todos los archivos y directorios que
aparecen.
Lo va a ocultar ahora si lo activo por supuesto que va a desaparecer el módulo.
Se fijan ahí está activado y desaparece.
Lo dejamos desactivado y vuelve a aparecer.
Eso sería una forma de ocultar, de ocultar elementos, otra forma lo voy a dejar desactivado.
Sería utilizando el joie, ignorad names, ocultar nombres que queremos ignorar.
Pero para eso tenemos que ir a la configuración del Kor aka Buscar y no Redmayne.
Por acá lo tenemos.
Ignorad names.
Acá están todos los archivos directorios que están ocultos.
Podemos agregar con una coma el not modules perfecto y ahí lo oculta de forma automática.
Entonces tenemos esas dos alternativas.
Cualquiera de las dos da lo mismo, ya sea con Ignore Main o bien con el archivo git ignore.
Incluso lo podría ver con los dos, los dos activos.
Pero en fin, da lo mismo.
Vamos a dejar oculto el not modules, la idea de ocultar la dependencia.
No es necesario que la tengamos en el editor.
Bien, continuemos.
Angular.
Punto, Yeison.
Es el archivo principal de configuración del proyecto.
Es el más importante, acá podemos configurar prácticamente todo.
Bueno, para comenzar aparece en Proyectes el nombre del proyecto como un atributo con toda la configuración.
Por ejemplo, cuál es la carpeta raíz del proyecto del código fuente SRC?
Entonces en ese recé está todo el código fuente tipo de proyecto application prefijo app.
Luego tenemos todo lo que es build.
Cuando generamos el proyecto, por ejemplo, el directorio de salida output path, todo el contenido
que generamos cuando realizamos el display, la compilación todo se genera dentro del directorio dist.
Clientes a Pepe.
Luego tenemos el index que sería la puerta entrada a nuestra aplicación.
La página de inicio o el jom.
El archivo index html que está dentro de él.
Ese reze.
Luego tenemos la clase principal, ese menta y scrip que básicamente lo que hace es cargar nuestro módulo
por defecto.
El módulo por defecto lo tenemos dentro de app.
Acá lo tenemos app módulo.
Si nos vamos, entonces.
Amén.
Justamente realiza el arranque el vostra del módulo app module.
Luego tenemos los poli fails, que es una herramienta que nos permite dar compatibilidad con todos los
navegadores Internet Explorer, Chrome, Firefox, Ópera Safari, compatibilidad con todos, la configuración
de tags script, todo lo que son los assets.
Muy importante son todos los recursos estáticos de nuestra aplicación.
Por ejemplo, el favicon que aparece en el navegador, en las pestañas.
Todo lo que son imágenes JavaScript, hojas de estilo, cualquier recurso estático lo podemos tener
dentro de los assets.
Por ejemplo, es arrasé.
Assets es el directorio donde guardamos todos estos archivos.
Luego podemos configurar hoja de estilos que se van a anexar a agregar.
Cuando arranca nuestra aplicación dentro del index.
HTML por defecto tiene esta elpunto ceses.
Pero podemos tener más separados por coma.
Podemos agregar más hoja de estilos globales de nuestra aplicación.
Y pasa lo mismo con los scripts que serían los lleva a scripts.
Cualquier archivo JS lo podemos registrar acá también separados por comas.
Luego tenemos configuraciones de ambiente, de producción, desarrollo y un montón de cosas.
Continuamos con Package Punto Yaiza otro chivo muy importante contiene el nombre de la aplicación,
la versión scripts, que son atajos para ejecutar comandos y dependencias.
En este archivo se manejan todas las dependencias con sus versiones.
Por ejemplo, todo lo que dependencias son dependencias para producción para ejecutar nuestra aplicación,
como por ejemplo todos los paquetes de angula animation common core for para formularios http router.
El API reactive stations de JavaScript, en fin.
Y en TEP dependencias son todas las dependencias que están relacionadas al ambiente.
Desarrollo.
Todo lo que es escribir nuestro código.
Pruebas unitarias.
El lenguaje describe el liter para detectar errores de sintaxis.
Está todo acá.
Por supuesto.
Cuando generamos el proyecto lo compilamos.
Todas estas librerías no se incluyen, solamente se van a incluir.
La producción en ningún caso la desarrolla.
Por lo tanto, nuestro proyecto puede tener un montón de archivo, un montón de librerías y configuraciones.
Pero en el momento de compilar JavaScript, de generar nuestro proyecto con Get Build, se va a incluir
en el directorio dist lo justo y necesario y va a quedar nuestra aplicación bastante liviana.
Solamente el JavaScript necesario para correr la aplicación.
Nuestro código también en JavaScript hoja de estilos y HTML, todo estático.
Y en caso de que se haya eliminado, por ejemplo, una librería de nuestro proyecto del directorio,
nos module que se haya borrado o se haya corrompido.
Este archivo nos permite recuperar toda la dependencia.
Incluso podríamos borrar el directorio no module y lo podríamos volver a generar y descargar todas estas
dependencias simplemente a través de archivos con el comando npm install a través del not tacas manoy
en nuestros almadía.
Bien.
Luego tenemos el Redmi con extensión MD o Markdown.
Básicamente la documentación.
Por ejemplo, acá indica que el proyecto fue generado con Angular si el AI y la versión también nos
muestra cómo ejecutar o levantar el servidor de desarrollo a través de Fisher y lo podemos navegar en
local host con el puerto 4200 por defecto.
Un servidor live reloj que se reinicia, que se actualiza automáticamente cuando cambiamos o guardamos
un archivo de nuestro proyecto.
Nuestro código fuente.
Luego tenemos todo el código para generar generar por ejemplo componentes directivas pipe, clase servis,
clases, interface, numeradores, módulos, en fin, a través de endi generate.
Por ejemplo, si queremos generar un componente usamos en txi generate component y el nombre del componente,
pero también tenemos una abreviación, un atajo.
Por ejemplo, en vez de usar en ti generate, podemos usar en ji ji simplemente la letra G y en vez
de componer utilizamos C, por ejemplo en Chi C y C de component.
Luego tenemos ng build para construir nuestro proyecto, el código JavaScript que va a ejecutar el navegador.
Todo queda almacenado dentro del directorio dist en distribución y podemos usar la bandera menos menos
prop para producción.
También tenemos para generar pruebas unitarias y también en Yelp para la ayuda.
En fin, este archivo Redmi es una pequeña documentación con todo resumido.
Luego tenemos el archivo TA escribe con Fiti es Koffi Archivo Configuración detalle script que nos ayuda
con las alertas.
Si estamos usando bien las variables en el código, si estamos creando correctamente una clase, si
estamos usando bien un decorador, una anotación y también nos permite activar la compilación que compila
de forma automática cada vez que guardemos nuestro código fuente un archivo, lo cual nos recomienda
por qué crees que estemos guardando una clase del proyecto?
Un archivo va a estar compilando.
La idea es compilar después que finalicemos nuestra aplicación, pero no ante cualquier cambio.
Luego tenemos el toit script.
El test es lint que igual que el ts config no es necesario que lo toquemos ya que viene configuro.
Voto automático y el Lint se encarga de detectar errores de sintaxis en nuestro código y también nos
ayuda a que todos los errores de sintaxis que puedan ocurrir a medida que estén escribiendo el código
en el editor, se muestren de forma correcta en el IDE.
En el editor.
Y no tenemos más la próxima clase.
Continuamos entonces analizando el reseque.
Bastante completo.
Bastante amplio.
Nada más.
Hasta la próxima.