API-Routen im serverseitigen Angular 18-Rendering

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

LaunchFast Logo LaunchFast

API-Routen im serverseitigen Angular 18-Rendering

Rishi Raj Jain
API Routes in Angular 18 Server Side Rendering

In diesem Leitfaden werde ich Sie durch die Einrichtung von API-Routen in einer serverseitig gerenderten Angular 18-Anwendung führen und dabei Express nutzen, um RESTful-Endpunkte zu erstellen

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Voraussetzungen

Sie benötigen Folgendes:

Inhaltsverzeichnis

Erstellen Sie eine neue Angular-Anwendung

Beginnen wir mit der Erstellung eines neuen Angular-Projekts. Führen Sie die folgenden Befehle aus:

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

„ng new“ ist die empfohlene Methode, um ein Angular-Projekt schnell zu erstellen

Wenn Sie dazu aufgefordert werden, wählen Sie:

  • „CSS“ für das Stylesheet-Format
  • „y“ zum Aktivieren von serverseitigem Rendering (SSR) und statischer Site-Generierung (SSR/Prerendering)

Sobald dies erledigt ist, wechseln Sie in das Projektverzeichnis und starten Sie die App im Entwicklungsmodus, indem Sie den folgenden Befehl ausführen:

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

Die App sollte auf localhost:4200 ausgeführt werden.

Legen Sie in „angularjson“ „prerender“: false fest, um sicherzustellen, dass die Anwendung nur serverseitiges Rendering ohne Vorrendering verwendet

Hinzufügen einer API-Route in Servern

Definieren Sie als Nächstes eine API-Route in „serverts“, um Daten für Ihre SSR-Anwendung bereitzustellen. Öffnen Sie „serverts“ und fügen Sie den folgenden Code hinzu:

// 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]
// ...

Diese Route („/api/data“) gibt eine JSON-Antwort „{ code: 1 }“ zurück, die von der Angular-Anwendung abgerufen werden kann

Appconfigts für HttpClient konfigurieren

Um Daten von unserem neuen API-Endpunkt abzurufen, stellen Sie sicher, dass „HttpClient“ mit „fetch“ eingerichtet ist. Öffnen Sie „appconfigts“ und fügen Sie „provideHttpClient“ hinzu:

// 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]
],
};

Daten in Appcomponentts abrufen

Um Daten von der API-Route auf der Clientseite abzurufen, öffnen Sie „appcomponentts“ und richten Sie eine einfache Datenabruffunktion ein, die bei der Komponenteninitialisierung ausgeführt wird:

// 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]
}

In diesem Setup:

  • „isPlatformBrowser“ wird verwendet, um sicherzustellen, dass der API-Aufruf nur auf der Clientseite und nicht auf der Serverseite erfolgt – Die Komponente ruft bei der Initialisierung Daten vom Endpunkt „/api/data“ ab und protokolliert sie in der Konsole

Ausführen des Servers im SSR-Modus

Um Ihre API-Routen im serverseitigen Rendering-Modus zu testen, müssen Sie die Angular-Anwendung erstellen und bereitstellen:

In einem Terminal:

Terminal window
npm run watch

Führen Sie in einem separaten Terminal Folgendes aus:

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

Auf Ihre Anwendung, jetzt mit serverseitigem Rendering und API-Routing, sollte unter localhost:4200 zugegriffen werden können.

Abschluss

In diesem Leitfaden haben wir erläutert, wie Sie API-Routen für das serverseitige Rendering in einer Angular 18-Anwendung einrichten. Mit diesem Ansatz können Sie Daten dynamisch vom Server bereitstellen und die Leistung Ihrer Anwendung mit vom Server gerenderten Inhalten verbessern

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.

Learn More Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024