jairogarcíarincón
01/05/2024
Contenidos
Entorno de desarrollo
Como entorno de desarrollo y al igual que hicimos en la clase de Sass y SCSS, volveremos a utilizar Visual Studio Code, y de hecho podremos beneficiarnos de las mimas extensiones que instalamos en su momento.
Si no lo tienes instalado, por favor revisa y ejecuta el capítulo de Instalación de la clase de Sass y SCSS antes de continuar.
Extensiones
Antes de empezar a trabajar con nuestro proyecto, es recomendable (aunque no necesario) instalar una extensión de Visual Studio Code llamada Angular Language Service y desarrollada directamente por el equipo de Angular. esta extensión nos permitirá escribir el código de los componentes de Angular de forma más eficaz:
Por supuesto, existen además extensiones que nos pueden ayudar a escribir componentes de Angular Material, pero dado que no son de ningún proveedor oficial, he preferido no incluirlas aquí.
Configuración
Una vez instalada y configurada la extensión, ya podemos abrir en Visual Studio Code la carpeta del proyecto para empezar a trabajar con él.
Lo primero que debemos saber es que, en este caso, no necesitamos la extensión de Sass que utilizamos en la clase anterior ya que, si estamos ejecutando el proyecto en modo desarrollo (ng serve), automáticamente Angunar se está encargando de vigilar (watch) y compilar los cambios que se produzcan en los archivos, incluyendo los de extensión scss y sass.
Creación de componentes necesarios
A partir de la estructura web que planteamos como objetivo y que copio aquí a continuación, vamos a necesitar crear una serie de componentes en nuestro proyecto que den servicio a las distintas páginas del mismo.
- Layout con header, nav, sidenav y footer
- Home con listado de casas de Hogwarts
- Página de vista de casa
- Página de información
- Página de formulario de contacto
El layout de nuestro proyecto lo configuraremos dentro del componente app por defecto instalado con Angular, y que ahora mismo corresponde a la vista principal.
Para las 4 páginas del sitio, vamos a crear 4 componentes nuevos, si bien en el caso de la página de formulario de contacto, usaremos un Schematics de Material Angular de tipo address-form, de forma que ya tengamos parte del trabajo hecho. No obstante, podríamos haber hecho también un componente desde 0 y simplemente ir añadiendo nosotros los campos necesarios.
Ejecuta el siguiente código en la consola del navegador (finaliza primero el proceso anterior ng serve con Ctrl + C si no lo habías hecho antes):
ng generate component home
ng generate component casa
ng generate component informacion
ng generate @angular/material:address-form contacto
Esto habrá generado dentro de /src/app 4 carpetas con todos los archivos necesarios parea cada uno de los 4 componentes del proyecto.
Assets necesarios
El sitio que vamos a crear requiere de un conjunto de imágenes, correspondientes al logo del sitio (en formatos claro y oscuro), así como a los escudos de cada casa. Todas ellas las tienes dentro de la siguiente carpeta, y debes añadirlas a tu proyecto dentro de la ruta /src/assets/img:
img
Además, necesitamos una serie de textos con información de cada casa que utilizaremos tanto en el listado como en la vista de cada casa. Para ello, crea un archivo llamado data.json dentro de /src/assets con el siguiente contenido:
01-data.json
Por otra parte, para que los componentes de Angular puedan leer directamente archivos JSON, debemos crear un archivo en la ruta /src/app llamado json-typing.d.ts con el siguiente contenido:
02-json-typing.d.ts
Este archivo declara un módulo capaz de leer archivos con extensión JSON e interpretar sus distintas propiedades.
Enrutamiento
Por último, antes de pasar a personalizar cada uno de los elementos del sitio web, debemos configurar el router de nuestra aplicación para que incluya todas las posibles rutas de la misma.
Para ello, modifica el contenido del fichero /src/app/app.routes.ts para que tenga el siguiente contenido, y presta atención a los comentarios del mismo:
03-app.routes.ts
Referencias
Angular components overview
Installation and code generation
Publicado el 21 de Noviembre de 2024
angular angular material material sass diseño responsive