Angular - Instalación

Instalar vía CLI

Abrimos en Visual Studio Code la terminal.

Requisitos

![](images/clipboard-3152498598.png)

Crear proyecto

ng new frontend

cd frontend
ng s

Ahora instalamos Tailwin CSS para angular

npm install tailwindcss @tailwindcss/postcss postcss --force

Creamos el archivo .postcssrc.json en la ruta frontend/.postcssrc.json

el siguiente codigo

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

queda asi:

Import Tailwind CSS

Adicionamos @import en ./src/styles.css

@import "tailwindcss";

Levantamos el servidor con

ng s

Para probar que todo este funcionando bien hacemos lo siguiente:

En frontend/src/app/app.html

<h1>Desarrollo Web</h1>

<router-outlet />

Si observas el resultado igual a la imagen anterior, incluyendo el tipo de fuente, entonces todo esta correcto.

Usando npm

npm install primeng @primeuix/themes

Ahora en el archivo frontend/src/app/app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';


import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: Aura
            }
        })
  ]
};

Quedaria asi:

Creamos los componentes de Layout

ng g c components/layout/header
ng g c components/layout/aside
ng g c components/layout/footer

Aplicamos la propiedad

standalone: true,

A todo los componentes incluyendo el componente app-root principal en

frontend/src/app/app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('frontend');
}

frontend/src/app/components/layout/aside/aside.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-aside',
  standalone: true,
  imports: [],
  templateUrl: './aside.html',
  styleUrl: './aside.css'
})
export class Aside {

}

frontend/src/app/components/layout/footer/footer.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-footer',
  standalone: true,
  imports: [],
  templateUrl: './footer.html',
  styleUrl: './footer.css'
})
export class Footer {

}

frontend/src/app/components/layout/header/header.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [],
  templateUrl: './header.html',
  styleUrl: './header.css'
})
export class Header {

}

Luego se importan los componentes de layout en app-root

frontend/src/app/app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Header } from './components/layout/header/header';
import { Footer } from './components/layout/footer/footer';
import { Aside } from './components/layout/aside/aside';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, Header, Footer, Aside],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('frontend');
}

frontend/src/app/app.html

<main class="min-h-screen flex flex-col border-4 border-red-500">
  <!-- HEADER -->
  <header class="h-16 bg-white border-2 border-blue-500 flex items-center justify-center font-bold text-blue-600">
    <app-header></app-header>
  </header>

  <!-- CONTENEDOR CENTRAL (ASIDE + CONTENT) -->
  <div class="flex flex-1">
    <!-- ASIDE -->
    <aside class="w-64 bg-white border-2 border-blue-500 flex items-start justify-start font-bold text-blue-400">
      <app-aside></app-aside>
    </aside>

    <!-- CONTENT -->
    <section class="flex-1 bg-white border-2 border-blue-500 flex items-center justify-center font-bold text-blue-600">

      <router-outlet />
    </section>
  </div>

  <!-- FOOTER (pegado al fondo) -->
  <footer class="h-16 bg-white border-2 border-blue-500 flex items-center justify-center font-bold text-blue-600 mt-auto">
    <app-footer></app-footer>
  </footer>
</main>

Levantamos el servidor

ng s

En el navegador se debe ver asi:

Procedemos a insertar el menu en aside

Elegimos PanelMenu

frontend/src/app/components/layout/aside/aside.html

<div class="card flex justify-center">
    <p-panelmenu [model]="items" class="w-full md:w-80" />
</div>