Entendiendo la estructura de Angular 9 y sus ventajas de uso

Dando seguimiento a mi primera entrada: creando mi primer proyecto en Angular 9 eh decidido darle continuidad ahora entendiendo su estructura y explicando ¿Que es Angular?, así que comencemos.

¿Qué es Angular?

Angular es un framework para la creación de páginas web SPA mantenido por Google. SPA es el acrónimo de Single Page Application o lo que es lo mismo, cuando un usuario entra en una web SPA, se carga todo a la vez en una misma página y Angular lo que hace por debajo es cambiar la vista al navegar por la página para que de la apariencia de una web normal.

¿Qué ventajas tiene una SPA?

Las principal ventaja de una SPA es la velocidad, al ser la primera vez de acceder a esta SPA la diferencia puede no notarse pero después de tener la carga de del sitio todo se vuelve instantáneo debido a que la carga del sitio es total no por secciones.

Debido a que SPA es una sola pagina, el servidor carga menos peticiones lo cual aumenta el performance del sitio.

Ventajas de usar Angular

• Lenguaje Typescript, tiene una sintaxis muy parecida a Java, esto ayuda si vienes de algún otro lenguaje orientado a objetos.
• Sigue el patrón MVC, con la vista separada de los controladores.
• Basado en componentes, es decir, podemos escribir componentes web con vista y lógica para después reutilizarlos en otras páginas.
• Comunidad muy grande con multitud de tutoriales y librerías.
• Programación reactiva, la vista se actualiza automáticamente a los cambios.
• Dispone de asistente por línea de comandos para crear proyectos base (Angular cli).
• Se integra bien con ionic, para adaptar aplicaciones web a dispositivos móviles.

Estructura de una app creada con Angular

Cuando creamos un proyecto en Angular (como lo explicamos en la entrada anterior), nos genera la siguiente estructura (en mi caso mi proyecto se llama angularBlog).

• e2e: Esta carpeta por el momento no es útil, aquí se encuentra el código para escribir tests y poder probar la aplicación.
• node_modules: En esta carpeta se encuentran las librerías de angular y sus dependencias, cuando instalemos librerías se añadirán aquí. Si quieres entender como se genera recomiendo la entrada de NPM del blog.
• src: Aquí se encuentran los archivos que componen nuestra aplicación.
  • app: Aquí se van a encontrar los componentes, vistas, y servicios de la app. Por el momento hay un componente llamado app con sus respectivos archivos (css, html controlador, tests, etc).
    • app.module.ts: En este archivo se especifica los componentes que vamos a usar en la app web. Cuando creamos un nuevo componente tenemos que importarlo en este archivo.
  • favicon: El favicon o icono principal del sitio.
  • index.html: Punto de entrada a nuestra web, este archivo se carga en todo el sitio, por lo que puedes poner código para que se incluya en todas las vistas.
  • main.ts: Algunas configuraciones de Angular, de momento no me ah hecho falta tocarlo.
  • polyfills.ts: Configuraciones y código que se ejecutará antes de que se inicie la app. Tampoco ah hecho falta tocarlo.
  • styles.css: Estilos css globales que se aplicarán en toda las vistas de la página.
  • test,ts,tsconfig.app.json, tsconfig.spec.json, typings.d.ts: Configuración para los tests. No es útil de momento.
• .angular-cli.json: Archivo de configuración de la app.
• .editorconfig: Configuraciones a la hora de desarrollar, identacion y configuraciones del editor.
• .gitignore: Archivo para que git ignore ciertas carpetas que no hace falta subir al repositorio, como node_modules.
• karma.conf.js: Más configuraciones para los tests, esta vez los de Karma.
• package-lock.json: Árbol de dependencias que se crea automáticamente.
• package.json: Archivo con las dependencias instaladas y los comandos que se pueden ejecutar con npm .
• protractor.conf.js: Configuración para protractor, una herramienta para realizar tests en el navegador.
• README.md Archivo readme con información de la aplicación, principalmente del repositorio.
• tsconfig.json: Configuración para Typescript, el lenguaje de Angular.
• tslint.json: Configuración del linter de TypeScript (un linter nos sirve para que el editor nos muestre errores, sugerencias, etc).

En la siguiente entrada daremos seguimiento al proyecto que creamos, agregando algún componente y modificando el comportamiento de nuestra app.

Esta guía y otras se actualizan cada semana así que suscribete o dale like a la pagina y no te las pierdas.