En este tutorial, aprenderás a usar Tailwind para dar estilo a aplicaciones Angular CLI.
El objetivo es construir un diseño de aplicación con un encabezado y pie de página con sus respectivas rutas.
Requisitos
Asegúrate de tener las siguientes herramientas instaladas:
- Node JS y NPM, visite su página para ver las instrucciones.
- Ejecute node -v para verificar que tiene la versión 20 o superior.
- Ejecute
npm -v
para comprobar que tiene la versión 10 o superior.
- Angular CLI (npm install -g @angular/cli)
- Ejecute
ng version
para revisar que tiene la versión 17.
- Ejecute
Si prefiere usar yarn
, primero configure el administrador de paquetes predeterminado de Angular CLI. Esto asegura que la aplicación generada tenga un archivo yarn.lock
en lugar de un paquete-lock.json
.
1. Crea una nueva aplicación
Abra una terminal y ejecute el siguiente comando:
ng new angular17
El comando ng new
genera una aplicación Angular básica en una carpeta llamada angular17
e instala las dependencias.
La ejecución de este comando te da un recorrido por varias preguntas que configuran tu app con los estilos que quieras.
Además, una de las nuevas actualizaciones de Angular V17 es que nos permite desde el comienzo crear nuestro server side rendering
algo increíblemente útil.
Al final de la configuración, la CLI de Angular también inicializa un repositorio git y hace un commit inicial.
2. Abrir la aplicación en modo de desarrollo
Después que la instalación haya finalizado, ejecuta el siguiente comando e ingresa a la carpeta de tu proyecto.
cd angular17
En la carpeta del proyecto tú puedes iniciar el servidor de desarrollo usando el comando ng serve
.
** El servidor de desarrollo de Angular utiliza el
localhost:4200
, abre tu navegador en localhost:4200**
Haz clic en el enlace anterior y comprueba que funciona. ¡Ahora si la aplicación está lista para utilizar algunos estilos 🤗!
3. Instala Tailwind
Ejecuta los siguientes dos comandos en la carpeta de tu proyecto para instalar Tailwind.
yarn add -D tailwindcss postcss autoprefixer
yarn add tailwindcss init
Después que finalice el proceso, abre el archivo tailwind.config.js
y agrega lo siguiente:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
Abre el archivo styles.css
y agrega las siguientes directivas:
@tailwind base;
@tailwind components;
@tailwind utilities;
Si quieres comprobar que Tailwind se instalo haz un cambio pequeño en tu
app.component.html
, prueba agregando esto:
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
MD Tip 💡
Recuerda que no debes eliminar la etiqueta<router-outlet></router-outlet>
.MDato 🗃️
Angular ahora no tiene modulos y en los siguientes pasos del tutorial te daras cuenta por que
4. Configura el layout de la aplicación
En este paso generaremos 3 componentes layout
, header
y footer
dentro de una carpeta llamada ui
.
💡 Es una buena idea mantener la UI (Interfaz de ususario) separada del resto de la aplicacion. Esta
Separacion de tareas
tambien te permite reutilizar facilmente la UI en otros proyectos.
Ejecuta el comando:
ng generate component ui/layout
Esto te generará una carpeta que se llama ui
y dentro de esta un componente llamado layout
.
A partir de aquí crearemos el componente header
y footer
dentro de esta carpeta, ejecutando estos 2 comandos:
ng generate component ui/header
ng generate component ui/footer
MDato
💡 El comandong generate
acepta abreviaturas: usang g c
Para generar un componente,ng g s
para generar un servicio, etc.
4.1 Implementa el LayoutComponent
Abre src/app/ui/layout/layout.component.html
y remplaza su contenido por lo siguiente:
<div class="flex flex-col h-full justify-between">
<app-header></app-header>
<div class='flex-grow py-4 px-16 text-center bg-pink-300
text-pink-900 '>
<div class="text-pink-500 text-3xl">
<router-outlet></router-outlet>
</div>
</div>
<app-footer></app-footer>
</div>
Vas a notar que las etiquetas de
header
footer
yrouter-outlet
se colocan rojas, eso es porque debes importarlas en el respectivo componentes donde las uses
Abre src/app/ui/layout/layout.component.ts
y agrega esto en los imports:
import { Component } from '@angular/core';
import {HeaderComponent} from '../header/header.component'
import {FooterComponent} from '../footer/footer.component'
import {RouterOutlet} from '@angular/router'
@Component({
selector: 'app-layout',
standalone: true,
imports: [HeaderComponent,FooterComponent, RouterOutlet],
templateUrl: './layout.component.html',
styleUrl: './layout.component.scss'
})
export class LayoutComponent {
}
4.2 Usa el LayoutComponent
Abra el archivo src/app/app-routes.ts
y agrega el siguiente código que es una lista de objetos que irán dentro del array de routes
.
{
path: '',
component: LayoutComponent,
children: [
// Here we will add our application pages
],
},
Para que puedas usar el LayoutComponent debes importarlo en este mismo archivo en la parte superior.
import {LayoutComponent} from './ui/layout/layout.component'
Abre el archivo app.component.html
y deja solo la etiqueta router-outlet
.
Guarda y deberías ver en tu navegador el HeaderComponent
y FooterComponent
renderizados.
4.3 Implementa el Header
Abre el archivo header.component.html
y pega este código
<div class='p-4 bg-violet-900 text-violet-300'>
<div class="flex justify-between align-items">
<div>LOGO</div>
<div class="flex space-x-4">
<a
routerLinkActive="active" routerLink="/home"
class="bg-pink-500 text-white rounded-md px-3 py-2
text-sm font-medium" aria-current="page">Home</a>
<a
routerLinkActive="active" routerLink="/blog"
class="text-gray-300 hover:bg-pink-500 hover:text-
white rounded-md px-3 py-2 text-sm font-
medium">Blog</a>
<a
routerLinkActive="active" routerLink="/contact"
class="text-gray-300 hover:bg-pink-500 hover:text-
white rounded-md px-3 py-2 text-sm font-
medium">Contact</a>
</div>
</div>
</div>
Importa RoterLink
y RoterLinkActive
en el archivo header.component.ts
.
imports: [RouterLink, RouterLinkActive],
4.4 Implementa el Footer
Abre el archivo footer.component.html
y pega este código
<div class='p-4 text-center bg-violet-900 text-violet-300'>
COPYRIGHT © 2069
</div>
5. Agrega páginas a tu aplicación
Con el layout en su lugar es momento de agregar páginas a nuestra app.
Ejecuta el siguiente comando:
ng g c pages/home
Abre el siguiente archivo en la ruta src/app/pages/home/home.component.html
y remplaza el contenido por esto:
<div class="bg-white px-6 py-24 sm:py-32 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">This is my home</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
</div>
</div>
Recuerdas que habiamos configurado nuestro layout en el archivo
app-routes.ts
Agrega tu primera rutaHome
que es hija del layout el cual es compartido en cualquiera de las rutas, copia y pega lo siguiente el archivo app-routes.ts
dentro del arraychildren:
{ path: 'home', component: HomeComponent },
Y ahora, si das clic en la ruta Home
en tu navegador te mostrará el Homecomponent
que acabaste de diseñar en el punto anterior.
MDato 🗃️
Puedes investigar mas acerca de rutas hijas o Nesting routes aqui
5.1 Crea la página blog
Ejecuta el comando:
ng g c pages/blog
Abre el archivo blog.component.html
y copia esto:
<section class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
<div class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20"></div>
<div class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"></div>
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<img class="mx-auto h-12" src="https://tailwindui.com/img/logos/workcation-logo-indigo-600.svg" alt="">
<figure class="mt-10">
<blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”</p>
</blockquote>
<figcaption class="mt-10">
<img class="mx-auto h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="mt-4 flex items-center justify-center space-x-3 text-base">
<div class="font-semibold text-gray-900">Judith Black</div>
<svg viewBox="0 0 2 2" width="3" height="3" aria-hidden="true" class="fill-gray-900">
<circle cx="1" cy="1" r="1" />
</svg>
<div class="text-gray-600">CEO of Workcation</div>
</div>
</figcaption>
</figure>
</div>
</section>
Abre nuevamente el archivo de tus rutasapp-routes.ts
y agrega la nueva ruta de blog
children: [
{ path: 'home', component: HomeComponent },
{ path: 'blog', component: BlogComponent },
],
💡 Recuerda que cada ruta que agregues la debes importar en la parte superior de este mismo archivo.
5.2 Crea la página contact
Ejecuta el comando:
ng g c pages/contact
Abre el archivo contact.component.html
y copia esto:
<form [formGroup]="form" class="mx-auto mt-16 max-w-xl sm:mt-20">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-white">Email</label>
<div class="mt-2.5">
<input formControlName="email" type="email" name="email" id="email" autocomplete="email" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div><div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-white">Password</label>
<div class="mt-2.5">
<input formControlName="password" type="email" name="email" id="password" autocomplete="email" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
</div>
<div class="mt-10">
<button type="submit" (click)="submit()" [disabled]="!form.value" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Let's talk</button>
</div>
</form>
Abre nuevamente el archivo de tus rutas app.routes.ts
y agrega la nueva ruta de contact
children: [
{ path: 'home', component: HomeComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'contact', component: ContactComponent },
],
Para que nuestro formulario reactivo funcione debemos hacer algunos cambios en el archivo contact.component.ts
Copia y pega lo siguiente:
import { Component } from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'
@Component({
selector: 'app-contact',
standalone: true,
imports: [
ReactiveFormsModule
],
templateUrl: './contact.component.html',
styleUrl: './contact.component.scss'
})
export class ContactComponent {
form = new FormGroup({
email: new FormControl(''),
password: new FormControl(''),
});
public submit() {
console.log(this.form.value);
}
}
6. Redirigir la ruta raíz
Abre el archivo app.routes.ts
y agrega el siguiente objeto en el array de Routes
{
path: '',
// If this path is the 'full' match...
pathMatch: 'full',
// ...redirect to this route.
redirectTo:'home',
},
Que hacer a partir de aquí?
Como se explica en la introducción, este es un punto de partida y debe ser sencillo mejorar esta app como te parezca
Tailwind es un framework de CSS poderoso y con muchas alternativas para colocar estilos a una app de forma rápida, después que aprendas a manejar su sintaxis podrás usarla a tu favor.
Te dejo por aquí su página oficial para que explores un poco más.
Conclusión
En este tutorial has aprendido a crear una aplicación básica y utilizar tailwind para crear un diseño con encabezado(header) y pie de página(footer) la aplicación tiene varias páginas, así que esta es una oportunidad para que apliques carga perezosa(Lazy loading).
Puedes guiarte por la nueva documentación de Angular V17 en la sección Guías detalladas(In depth Guides)
Si tienes alguna pregunta no dudes en dejar un comentario en DEV o enviarme un mensaje al X
Muchas gracias a Beeman por revisar este post.
Nos vemos en otro post ✋🏽
Top comments (0)