Rutas API en servidores de renderizado Angular 18

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

Rutas API en servidores de renderizado Angular 18

Rishi Raj Jain
API Routes in Angular 18 Server Side Rendering

En esta guía, lo guiaré en la configuración de rutas API en una aplicación Angular 18 renderizada del lado del servidor, aprovechando Express para crear puntos finales RESTful.

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Requisitos previos

Necesitará lo siguiente:

Tabla de contenido

Crea una nueva aplicación angular

Comencemos creando un nuevo proyecto Angular. Ejecute los siguientes comandos:

Terminal window
npm install -g @angular/cli@latest
ng new angular-ssr-api-routes

ng new es la forma recomendada de desarrollar rápidamente un proyecto Angular

Cuando se le solicite, elija:

  • CSS para el formato de hoja de estilo
  • y para habilitar la representación del lado del servidor (SSR) y la generación de sitios estáticos (SSR/prerenderización)

Una vez hecho esto, vaya al directorio del proyecto e inicie la aplicación en modo de desarrollo ejecutando el siguiente comando:

Terminal window
cd angular-ssr-api-routes
npm run start

La aplicación debería estar ejecutándose en localhost:4200

En angularjson, configure "prerender": false para garantizar que la aplicación solo use renderizado del lado del servidor sin prerenderizado

Agregar una ruta API en servidores

A continuación, defina una ruta API en servits para servir datos para su aplicación SSR. Abra servits y agregue el siguiente código:

// File: server.ts // [!code focus]
// ...
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('**', express.static(browserDistFolder, {
maxAge: '1y',
index: 'index.html',
}));
server.get('/api/data', (req, res) => { // [!code ++] // [!code focus]
res.json({ code: 1 }); // [!code ++] // [!code focus]
}) // [!code ++] // [!code focus]
// ...

Esta ruta (/api/data) devolverá una respuesta JSON { code: 1 }, que puede ser recuperada por la aplicación Angular

Configurando appconfigts para HttpClient

Para recuperar datos de nuestro nuevo punto final API, asegúrese de que HttpClient esté configurado usando fetch. Abra appconfigts y agregue provideHttpClient:

// File: app.config.ts // [!code focus]
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http'; // [!code ++] // [!code focus]
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(),
provideHttpClient(withFetch()), // [!code ++] // [!code focus]
],
};

Obteniendo datos en componentes de la aplicación

Para recuperar datos de la ruta API en el lado del cliente, abra appcomponentts y configure una función simple de obtención de datos que se ejecute durante la inicialización del componente:

// File: app.component.ts // [!code focus]
import { isPlatformBrowser } from '@angular/common'; // [!code ++] // [!code focus]
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; // [!code ++] // [!code focus]
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
isBrowser: boolean; // [!code ++] // [!code focus]
title = 'with-angular';
constructor(@Inject(PLATFORM_ID) platformId: Object) { // [!code ++] // [!code focus]
this.isBrowser = isPlatformBrowser(platformId); // [!code ++] // [!code focus]
} // [!code ++] // [!code focus]
async ngOnInit() { // [!code ++] // [!code focus]
if (this.isBrowser) { // [!code ++] // [!code focus]
const fetchCall = await fetch('/api/data'); // [!code ++] // [!code focus]
const fetchResp = await fetchCall.json(); // [!code ++] // [!code focus]
// Do something // [!code ++] // [!code focus]
} // [!code ++] // [!code focus]
} // [!code ++] // [!code focus]
}

En esta configuración:

  • isPlatformBrowser se utiliza para garantizar que la llamada a la API solo se realice en el lado del cliente, no en el lado del servidor.
  • El componente obtiene datos del punto final /api/data durante la inicialización y los registra en la consola.

Ejecutando el servidor en modo SSR

Para probar sus rutas API en modo de renderizado del lado del servidor, necesita compilar y servir la aplicación Angular:

En una terminal:

Terminal window
npm run watch

En una terminal separada, ejecute:

Terminal window
npm run serve:ssr:angular-ssr-api-routes

Su aplicación, ahora con renderizado del lado del servidor y enrutamiento API, debería ser accesible en localhost:4200

Conclusión

En esta guía, cubrimos cómo configurar rutas API para la renderización del lado del servidor en una aplicación Angular 18. Con este enfoque, puede servir datos dinámicamente desde el servidor y mejorar el rendimiento de su aplicación con contenido renderizado en el servidor.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter

Learn More Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024 October 30, 2024
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones October 26, 2024