Minimale Site in Angular mit Headless Oracle Content Management erstellen

Einführung

Angular ist eine Plattform für die Erstellung von mobilen und Desktop-Webanwendungen.

Um unseren Oracle Content Management-Inhalt in einer Angular-Anwendung zu nutzen, können Sie das Angular Minimal Sample als Open Source-Repository auf GitHub verwenden.

In diesem Tutorial erstellen wir eine einfache minimale Site in Angular. Dabei nutzen wir Oracle Content Management als Headless CMS und sein Software-Entwicklungskit (SDK) für die Inhaltsbereitstellung in JavaScript. Dieses englischsprachige Beispiel ist auf GitHub verfügbar.

Das Tutorial besteht aus drei Schritten:

1. Oracle Content Management vorbereiten
2. Bauen Sie die minimale Website in Angular
3. Vorbereitung der Anwendung auf das Deployment

Voraussetzungen

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zuerst die folgenden Informationen lesen:

• Wichtige Konzepte
• Asset-Repositorys

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

• Oracle Content Management-Abonnement
• ein Oracle Content Management-Account mit der Rolle "Inhaltsadministrator"
• ein Windows- oder Mac-Computer mit Knotenversion 10 oder höher

Unser Aufbau

Bei minimalem Winkel können Sie problemlos Bilder und andere Inhalte aus dem Oracle Content Management-Repository abrufen.

Im Folgenden finden Sie den Endstatus unseres Tutorials, eine minimale Angular Site, die Inhalte von Oracle Content Management konsumiert:

https://headless.mycontentdemo.com/samples/oce-angular-minimal-sample

So sieht die Homepage am Ende dieses Tutorials aus:

So sieht die Seite "Kontakt" am Ende dieses Tutorials aus:

Um fortzufahren, müssen Sie ein aktives Abonnement für Oracle Content Management haben und mit der Rolle "Inhaltsadministrator" angemeldet sein.

Aufgabe 1: Oracle Content Management vorbereiten

Wenn noch keine Oracle Content Management-Instanz vorhanden ist, finden Sie unter Schnellstart Informationen zur Registrierung für Oracle Cloud, zur Bereitstellung einer Oracle Content Management-Instanz und zur Konfiguration von Oracle Content Management als Headless CMS.

Für dieses Tutorial müssen Sie ein Contentmodell erstellen. Es ist ein herunterladbares Asset Pack verfügbar, das Ihr leeres Repository mit Inhaltstypen und zugehörigen Inhalten ausfüllt.

So bereiten Sie Oracle Content Management vor:

1. Erstellen Sie einen Kanal und ein Asset-Repository.
2. Erstellen Sie ein Contentmodell mit einer der beiden folgenden Methoden:
   • Methode 1: Oracle Content Management-Beispielassetpaket importieren
   • Methode 2: Eigenes Contentmodell erstellen

Kanal- und Asset-Repository erstellen

Sie müssen zunächst einen Kanal und ein Asset-Repository in Oracle Content Management erstellen, damit Sie Inhalte veröffentlichen können.

So erstellen Sie einen Kanal und ein Asset-Repository in Oracle Content Management:

1. Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.

2. Wählen Sie im linken Navigationsmenü die Option Inhalt und dann in der Auswahlliste im Seitenheader die Option Kanäle veröffentlichen aus.

   

3. Klicken Sie in der oberen rechten Ecke auf Create, um einen neuen Kanal zu erstellen. Benennen Sie den Kanal "OCEMinimalChannel" für dieses Tutorial, und behalten Sie den Zugriff öffentlich. Klicken Sie auf Save, um den Channel zu erstellen.

   

4. Wählen Sie im linken Navigationsmenü die Option Inhalt, und wählen Sie in der Auswahlliste im Seitenheader die Option Repositorys aus.

   

5. Klicken Sie in der oberen rechten Ecke auf Erstellen, um ein neues Asset-Repository zu erstellen. Benennen Sie das Asset-Repository "OCEMinimalRepository" für den Zweck dieses Tutorials.

   

6. Wählen Sie im Feld Veröffentlichungskanäle den Kanal OCEMinimalChannel aus, um Oracle Content Management anzugeben, dass Inhalte im Repository OCEMinimalRepository im Kanal OCEMinimalChannel veröffentlicht werden können. Klicken Sie anschließend auf Speichern.

   

Contentmodelle erstellen

Im nächsten Schritt erstellen Sie ein Contentmodell. Sie können eine von zwei Methoden verwenden:

• Methode 1: Oracle Content Management-Beispielassetpaket importieren
• Methode 2: Eigenes Contentmodell erstellen

Oracle Content Management-Beispielassetpaket importieren

Sie können ein vorkonfiguriertes Oracle Content Management-Beispielassetspack herunterladen, das alle erforderlichen Inhaltstypen und Assets für dieses Tutorial enthält. Gegebenenfalls können Sie auch ein eigenes Inhaltsmodell erstellen, anstatt das Beispielassets herunterzuladen.

Sie können eine Kopie des Inhalts, den wir in diesem Tutorial verwenden, aus dem Oracle Content Management Samples Asset Pack hochladen. Auf diese Weise können Sie mit den Inhaltstypen experimentieren und den Inhalt ändern. Wenn Sie das Oracle Content Management Samples Asset Pack importieren möchten, können Sie das Asset Pack-Archiv, OCESamplesAssetPack.zip herunterladen und in ein Verzeichnis Ihrer Wahl extrahieren:

1. Laden Sie das Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) von der Oracle Content Management-Seite Downloads herunter. Extrahieren Sie die heruntergeladene ZIP-Datei in ein Verzeichnis auf Ihrem Computer. Nach der Extraktion enthält dieser Speicherort eine Datei namens OCEMinimal_data.zip.

2. Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.

3. Wählen Sie im linken Navigationsmenü die Option Inhalt, und wählen Sie in der Auswahlliste im Seitenheader die Option Repositorys aus. Wählen Sie jetzt OCEMinimalRepository aus, und klicken Sie in der oberen Aktionsleiste auf die Schaltfläche Inhalt importieren.

   

4. Laden Sie OCEMinimal_data.zip vom lokalen Rechner in den Ordner Dokumente hoch.

   

5. Wählen Sie nach dem Hochladen OCEMinimal_data.zip aus, und klicken Sie auf OK, um den Inhalt in das Asset-Repository zu importieren.

   

6. Nachdem der Inhalt erfolgreich importiert wurde, navigieren Sie zur Seite Assets, und öffnen Sie das Repository OCEMinimalRepository. Alle zugehörigen Bilder und Inhaltselemente wurden nun dem Asset-Repository hinzugefügt.

   

7. Klicken Sie oben links auf Alle auswählen und dann auf Veröffentlichen, um alle importierten Assets zum Veröffentlichungskanal hinzuzufügen, den Sie zuvor erstellt haben, OCEGettingStartedChannel.

   

8. Vor der Veröffentlichung müssen Sie alle Assets validieren. Fügen Sie zuerst OCEMinimalChannel als ausgewählten Kanal hinzu, und klicken Sie dann auf die Schaltfläche Validieren.

   

9. Nachdem die Assets validiert wurden, können Sie alle Assets im ausgewählten Kanal veröffentlichen, indem Sie oben rechts auf die Schaltfläche Veröffentlichen klicken.

   

Danach können Sie auf der Seite Anlagen sehen, dass alle Assets veröffentlicht wurden. (Sie können dies mit dem Symbol über dem Assetnamen erklären.)

Nachdem Sie das Oracle Content Management Samples Asset Pack importiert haben, können Sie mit dem Erstellen der minimalen Site in React beginnen.

Eigenes Contentmodell erstellen

Anstatt das Oracle Content Management-Beispielassetpaket zu importieren, können Sie auch ein eigenes Inhaltsmodell erstellen.

Für dieses Tutorial wird der Inhaltstyp "MinimalMain" als Hauptinhaltstyp für dieses Beispiel verwendet. Dieser Inhaltstyp besteht aus Header- und Footerlogos sowie einer Liste von Seiten, die in der Navigation enthalten sein sollen.

So erstellen Sie Inhaltstypen für das Contentmodell:

1. Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.
2. Wählen Sie im linken Navigationsmenü Inhalt und dann Assettypen aus der Auswahlliste im Seitenheader.
3. Klicken Sie rechts oben auf Erstellen.
4. Wählen Sie diese Option, um einen Inhaltstyp (kein digitaler Assettyp) zu erstellen. Wiederholen Sie diesen Vorgang für alle erforderlichen Inhaltstypen.

Es werden drei Inhaltstypen mit jeweils einer eigenen Gruppe von Feldern erstellt:

• MinimalMain
• MinimalPage
• MinimalSection

Der erste Inhaltstyp MinimalMain muss die folgenden Felder enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
headerLogo	Medienfeld mit einem Wert		headerLogo
footerLogo	Medienfeld mit einem Wert		footerLogo
Seiten	Mehrfachwert-Referenzfeld		Seiten

Die Inhaltstypdefinition MinimalMain sollte folgendermaßen aussehen:

Der zweite Inhaltstyp MinimalPage muss das folgende Feld enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Abschnitte	Mehrfachwert-Referenzfeld		Abschnitte

Der Inhaltstyp MinimalPage sollte folgendermaßen aussehen:

Der dritte und letzte Inhaltstyp MinimalSection muss die folgenden Felder enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Typ	Einwertiges Textfeld	X	Typ
Überschrift	Einwertiges Textfeld		Überschrift
Hauptteil	Einzelwert-Großtextfeld		Hauptteil
Bild	Bildfeld mit einem Wert		Bild
Aktionen	Einwertiges eingebettetes Inhaltsfeld		Aktionen

Der Inhaltstyp MinimalSection sollte folgendermaßen aussehen:

Nachdem Sie die Inhaltstypen erstellt haben, können Sie diese Inhaltstypen dem zuvor erstellten Repository hinzufügen: OCEMinimalRepository:

1. Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.
2. Navigieren Sie zu OCEMinimalRepository.
3. Bearbeiten Sie das Repository, und geben Sie unter Assettypen alle drei neu erstellten Inhaltstypen an. Klicken Sie auf Speichern, um die Änderungen zu speichern.

Nachdem Sie die Inhaltstypen zum Repository hinzugefügt haben, können Sie das Repository OCEMinimalRepository auf der Seite Assets öffnen und mit dem Erstellen der Inhaltselemente für alle Inhaltstypen beginnen.

Aufgabe 2: Minimale Site in Angular erstellen

Um unseren Oracle Content Management-Inhalt in einer serverseitigen gerenderten Angular-Anwendung zu konsumieren, können Sie das Angular Minimal-Sitebeispiel verwenden, das als Open-Source-Repository auf GitHub verfügbar ist.

Hinweis: Beachten Sie, dass die Verwendung des Angular-Beispiels optional ist. Dieses Tutorial wird verwendet, um schnell zu beginnen. Sie können auch Ihre eigene Angular Anwendung erstellen.

So erstellen Sie die minimale Website in Angular:

1. Beispiel-Repository klonen und Abhängigkeiten installieren
2. Angular-Anwendung konfigurieren
3. Mit dem Oracle Content Management Content-SDK arbeiten
4. Inhalt mit dem Content-SDK abrufen

Beispiel-Repository klonen und Abhängigkeiten installieren

Das Angular minimale Sitebeispiel ist als Open-Source-Repository auf GitHub verfügbar.

Sie müssen zunächst das Beispiel von GitHub auf den lokalen Rechner klonen und Ihr Verzeichnis in die Repository Root ändern:

git clone https://github.com/oracle/oce-angular-minimal-sample.git
    cd oce-angular-minimal-sample

Nachdem Sie die Codebasis erstellt haben, müssen Sie Abhängigkeiten für die Anwendung herunterladen. Führen Sie den folgenden Befehl aus dem Root-Verzeichnis aus:

npm install

Angular-Anwendung konfigurieren

In diesem angular-minimalen Sitebeispiel müssen Sie einige Informationen konfigurieren, damit das Oracle Content Management Content-SDK (und alle anderen Anforderungen) die richtige Instanz-URL und API-Version mit dem richtigen Kanaltoken als Ziel festlegen kann. Diese Werte werden in src/scripts/server-config-utils.js verwendet, um einen neuen Zustellungsclient zu instanziieren.

Diese Anwendung verwendet eine .env-Datei, die von Webpack gelesen wird, wenn sie die Client- und Serveranwendungen bündelt. Mit webpack.DefinePlugin können alle aus der .env-Datei gelesenen Werte überall in der Anwendung zur Verfügung gestellt werden.

Öffnen Sie die .env-Datei in einem Texteditor. Folgendes wird angezeigt:

# The connection details for the Oracle Content Management server to be used for this application
    SERVER_URL=https://samples.mycontentdemo.com
    API_VERSION=v1.1
    CHANNEL_TOKEN=ba0efff9c021422cb134c2fd5daf6015

Ändern Sie jedes Schlüssel/Wert-Paar entsprechend Ihrer Instanz-URL, der gewünschten API-Version und dem mit Ihrem Veröffentlichungskanal verknüpften Kanaltoken. Der Kanal für dieses Tutorial ist OCEMinimalChannel.

Mit dem Oracle Content Management Content-SDK arbeiten

Oracle Content Management bietet ein SDK für die Erkennung und Verwendung von Inhalten in Ihren Anwendungen. Das SDK wird als NPM-Modul veröffentlicht, und das Projekt wird auf GitHub gehostet.

Weitere Informationen zum SDK finden Sie hier.

Das SDK wurde als Laufzeitabhängigkeit für dieses Projekt in der Datei package.json registriert.

Inhalt mit dem Content-SDK abrufen

Jetzt können wir das Content-SDK zum Abrufen von Inhalten verwenden, damit wir es in unserer Angular-Anwendung wiedergeben können.

Das Inhalts-SDK verwendet ein DeliveryClient-Objekt, um den Endpunkt anzugeben. Sie können alle Anforderungen mit diesem Clientobjekt erstellen.

Der Ordner src/scripts enthält den Code zum Abrufen von Daten aus Oracle Content Management mit dem Content-SDK.

Die Datei src/scripts/server-config-utils.js importiert das Content-SDK und erstellt dann einen Zustellungsclient mit der in .env angegebenen Konfiguration.

Mit dem folgenden Befehl wird das SDK importiert:

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

Der folgende Befehl erstellt den Zustellungsclient:

return createDeliveryClient(serverconfig);

Die Datei src/scripts/services.js enthält Funktionen zum Abrufen der Daten für diese minimale React-Anwendung.

Die Methode fetchOceMinimalMain() ruft den Inhaltstyp MinimalMain mit einem Slug von minimalmain ab.

export async function fetchOceMinimalMain() {
      const data = await getItem('minimalmain', 'fields.headerlogo,fields.footerlogo,fields.pages');
      if (!data.hasError) {
        const { fields } = data;
        const { headerlogo, footerlogo } = fields;
        // Extract the sourceset for the headerImage and footerImage and put it back in the data
        data.headerRenditionURLs = getSourceSet(headerlogo);
        data.footerRenditionURLs = getSourceSet(footerlogo);
      }
      return data;
    }

Zum Rendern der Bilder stellt services.js eine Helper-Methode bereit, mit der das Quellset für ein Asset abgerufen wird, das aus den Formatvarianten für das Asset erstellt wird.

function getSourceSet(asset) {
      const urls = {};
      urls.srcset = '';
      urls.jpgSrcset = '';
      if (asset.fields && asset.fields.renditions) {
        asset.fields.renditions.forEach((rendition) => {
          addRendition(urls, rendition, 'jpg');
          addRendition(urls, rendition, 'webp');
        });
      }
      // add the native rendition to the srcset as well
      urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
      urls.native = asset.fields.native.links[0].href;
      urls.width = asset.fields.metadata.width;
      urls.height = asset.fields.metadata.height;
      return urls;
    }

Die Methode fetchPage() ruft den Inhaltstyp MinimalPage mit dem Slug-Wert für die Seite ab, die aus der vorherigen Abfrage abgerufen wurde.

export async function fetchPage(pageslug) {
      // Get the page details
      const page = await getItem(pageslug, 'fields.sections');
      return page;
    }

Die Methode getRenditionURLs() ruft die Formatvarianten-URLs für jedes Bild ab, das in einem Abschnitt mit der ID für dieses Bild definiert werden kann. Dieser Aufruf erfolgt auf Clientseite.

export function getRenditionURLs(identifier) {
      const client = getClient();
      return client.getItem({
        id: identifier,
        expand: 'fields.renditions',
      }).then((asset) => getSourceSet(asset))
        .catch((error) => logError('Fetching Rendition URLs failed', error));
    }

Nachdem wir unsere Datenabfrage erstellt haben, können wir die Antworten in unseren englischsprachigen Komponenten wiedergeben.

Clientseitiges und serverseitiges Rendering - Vergleich

Mit dem clientseitigen Rendering (CSR) ist der Client für das Erstellen und Rendering des Inhalts einer Webseite mit JavaScript verantwortlich. Mit dem serverseitigen Rendering (SSR) wird die gesamte Seite auf dem Server erstellt, und eine vollständige Webseite wird an den Client zurückgegeben.

Wenn die Webseite vom Server im clientseitigen Rendering angefordert wird, enthält das zurückgegebene HTML-Dokument Skeleton-HTML und keinen tatsächlichen Inhalt. Sie enthält einen Verweis auf ein JavaScript-Bundle, das der Client dann vom Server anfordert. Beim Empfang dieses Bundle führt der Client das JavaScript aus und füllt die Webseite auf. Bis der Client die Ausführung des JavaScript abgeschlossen hat, wird dem Benutzer eine leere Webseite angezeigt. Ein Nachteil der clientseitigen gerenderten Anwendungen ist, dass bei der Indexierung einiger Web-Crawler die Site keine tatsächlichen Inhalte vorhanden sind.

Mit dem serverseitigen Rendering (SSR) wird die gesamte Seite auf dem Server erstellt, und eine vollständige Webseite wird an den Client zurückgegeben. Der Vorteil besteht darin, dass Web-Crawler den gesamten Inhalt auf der Webseite indexieren können.

Angular Server-seitiges Rendering

Der Fluss der englischsprachigen Bildgalerieanwendung ist wie folgt:

1. Der Client fordert den Server für eine bestimmte Route an.
2. Der Express-Server empfängt die Anforderung.
3. Der Express-Server übergibt alle Clientanforderungen für Seiten an die Express Engine von Angular Univeral
4. Die Express Engine von Angular Univeral verwendet eine HTML-Vorlagendatei und füllt sie mit den folgenden Daten auf:
   1. Das Markup für die angegebene Route
   2. Die Routendaten wurden serialisiert
   3. Referenzen auf Stylesheets
   4. Referenzen auf JavaScript-Bundles, die auf dem Client ausgeführt werden sollen
5. Der Express-Server gibt das von der Express Engine von Angular Univeral erstellte HTML-Dokument an den Client zurück
6. Der Client empfängt die HTML und gibt sie wieder. Dem Benutzer wird eine vollständig formatierte Webseite angezeigt.
7. Der Client fordert alle JavaScript-Bundles vom Server an. Nach dem Empfang führt der Client das JavaScript im Bundle aus.
   1. Es "hydriert" die HTML und fügt sie in jedes clientseitige JavaScript ein, z.B. Ereignis-Listener.
   2. Angular nimmt die serialisierten Daten automatisch von der Seite in den JavaScript-Code ein, damit sie für die Komponenten verfügbar sind
8. Wenn das HTML-Dokument ein Stylesheet enthielt, fordert der Client das Stylesheet an.

Angular CLI unterstützt das Hinzufügen von serverseitiger Rendering-Unterstützung zu einer vorhandenen Angular-Anwendung. Weitere Einzelheiten finden Sie unter https://angular.io/guide/universal.

Serverseitiger Express-Server

Die Serveranwendung verwendet einen Express-Server, um die Anforderung zu empfangen und an die Express Engine von Angular Univeral weiterzuleiten.

Die Express-Serverdatei befindet sich auf server.js. Diese Datei wird von der Angular CLI beim Hinzufügen der serverseitigen Wiedergabeunterstützung erstellt.

Angular Components

Anguläre Komponenten werden in TypeScript geschrieben und definieren eine Vorlage, die die die Ansicht definiert. Diese Templates enthalten normale HTML-, Angular- und Binding-Markups, mit denen Angular den HTML-Code vor der Wiedergabe anpassen kann.

Die nächsten Abschnitte bieten einen Überblick darüber, wie Angular unsere Anwendung in jeder unserer Komponenten darstellt:

• Anwendungsmodul
• Root-Modul für serverseitiges Rendering
• Seitendaten-Resolver
• App-Komponente
• Header- und Footer-Komponenten
• Abschnittskomponente
• PageComponent

Anwendungsmodul

Das App-Modul befindet sich in src/app/app.module.ts. Sie führt ein Bootstrapping der Anwendung mit der App-Komponente durch.

Diese Datei definiert die verschiedenen Routen für unsere Anwendung. Auf unserer Seite möchten wir zwei Routen bereitstellen: - den Root-Pfad (/) - und einen Seitenpfad (/page/:slug)

Die Root-Route wird zur Seitenroute umgeleitet, ohne dass ein Seiten-Slug angegeben ist. Die Seitenroute definiert den Resolver PageDataResolver, mit dem alle für die Route erforderlichen Daten abgerufen werden, bevor die Komponenten der Route erstellt werden.

Öffnen Sie die Root-Komponente unter src/app/app.module.ts, und lesen Sie die definierten Routen:

const appRoutes: Routes = [
      // no path specified, go to home
      {
        path: '',
        redirectTo: '/page/',
        pathMatch: 'full',
        runGuardsAndResolvers: 'always',
      },
      {
        path: 'page/:slug',
        component: PageComponent,
        resolve: { routeData: PageDataResolver },
        runGuardsAndResolvers: 'always',
      },
    ];

Dieses App-Modul ist der Einstiegspunkt bei der Wiedergabe der Anwendung auf Clientseite.

Root-Modul für serverseitiges Rendering

Der wichtigste Einstiegspunkt für diese Angular-Anwendung ist bei der Wiedergabe der Anwendung auf dem Server das App-Servermodul in src/app/app.server.module.ts.

Dieses Modul importiert das App-Modul, das sich in src/app/app.server.module.ts befindet, zusammen mit Angular ServerModule. Die serverseitigen Anwendungs-Bootstraps verwenden dieselbe App-Komponente wie der Client und verwenden alle gleichen Komponenten.

Die Angular CLI erstellt die Servermoduldatei, wenn die serverseitige Rendering-Unterstützung hinzugefügt wird.

Seitendaten-Resolver

Der in src/resolvers/page-data.resolver.ts gespeicherte Seitendaten-Resolver verarbeitet das Abrufen der Daten, die auf den Seiten wiedergegeben werden sollen.

Wenn der Client hydriert wird, werden diese Daten aus dem transferState abgerufen, der während des serverseitigen Renderings aufgefüllt und in das HTML-Dokument serialisiert wurde, das an den Client zurückgegeben wird.

Während des serverseitigen Renderings oder des clientseitigen Renderings, wenn die clientseitige Navigation stattgefunden hat, enthält transferState die Daten nicht. Die Daten werden vom Oracle Content Management-Server mit dem Content-SDK abgerufen.

return fetchOceMinimalMain()
      .then((appData) => {
        if (pageSlug === null || pageSlug === '') {
          pageSlug = appData.fields.pages[0].slug;
        }
        return fetchPage(pageSlug).then((pageData) => {
          if (isPlatformServer(this.platformId)) {
            // add the two pieces of data to the transfer state separately
            this.transferState.set(APP_KEY, appData);
            this.transferState.set(PAGE_KEY, pageData);
          }
    
          // return the two pieces of data in a single object
          const fullData = { appData, pageData };
          return fullData;
        });
      });

App-Komponente

Die App-Komponente in src/app/app.component.ts definiert die Root-Ansicht.

Diese Komponente enthält die Router-Link-Tags. Angular tauscht Komponenten auf und aus der Seite innerhalb dieser Tags aus, basierend auf der aktuellen Route.

Header- und Footer-Komponenten

Die Header- und Footer-Komponenten werden in der Seitenkomponente verwendet, um die Kopf- bzw. Fußzeile anzuzeigen.

Die Headerdaten werden an die Header-Komponente unter src/app/header/header.component.ts übergeben, und die Footer-Daten werden an die Footer-Komponente unter src/app/footer/footer.component.ts übergeben. Die Header- und Footer-Komponenten verwenden einfach die an sie übergebenen Daten. Sie erhalten keine zusätzlichen Daten vom Server. Siehe Bindings in src/app/header/header.component.html und src/app/footer/footer.component.html.

Abschnittskomponente

Die Abschnittskomponente, die sich in src/app/section/section.component.ts befindet, wird von der Seitenkomponente verwendet und dient zur Wiedergabe von Inhaltselementen des Typs MinimalSection.

Für diese Komponente wurden Daten von der Seitenkomponente übergeben. Wenn die Abschnittsdaten ein Bild enthalten, ruft sie einen clientseitigen Aufruf ab, um die Formatvarianten-URLs für das Bild vom Server abzurufen.

  ngOnInit() {
        this.heading = this.section.fields.heading;
        this.type = this.section.fields.type;
        // sanitize the content for html display
        const content = this.section.fields.body;
        const options = {
          stripIgnoreTag: true, // filter out all HTML not in the whitelist
          stripIgnoreTagBody: ['script'],
        };
        this.body = filterXSS(content, options);
        this.actions = this.section.fields.actions;
        if (this.section.fields.image) {
          getRenditionURLs(this.section.fields.image.id).then((urls) => {
            this.renditionURLs = urls;
          });
        }
      }

Seitenkomponente

Die Seitenkomponente ist für die Wiedergabe von Header, Footer und allen für eine Seite definierten Abschnitten verantwortlich.

Öffnen Sie die Seitenkomponente unter src/app/page/page.component.ts. In ngOnInit sehen Sie, dass die Komponente die Daten aus der aktiven Route abruft, die vom Resolver der Homepage aufgefüllt wurde.

  ngOnInit() {
        const fullData = this.route.snapshot.data.routeData;
        this.appData = fullData.appData;
        this.headerRenditionURLs = this.appData.headerRenditionURLs;
        this.footerRenditionURLs = this.appData.footerRenditionURLs;
    
        this.pageData = fullData.pageData;
        if (!this.pageData.hasError) {
          this.sections = this.pageData.fields.sections;
          this.pages = this.appData.fields.pages;
        }
      }

Das Markup für die Seitenkomponente befindet sich unter src/app/page/page.component.html.

Aufgabe 3: Anwendung auf das Deployment vorbereiten

Nachdem wir unsere Angular Minimal Site erstellt haben, müssen wir sie auf einem lokalen Entwicklungsserver sehen, damit wir Probleme debuggen und eine Vorschau der Anwendung vor dem Go-Live anzeigen können.

Bereiten Sie die Anwendung in zwei Schritten auf das Deployment vor:

1. Lokalen Entwicklungsserver starten
2. Anwendung in der Produktionsumgebung testen

Lokalen Entwicklungsserver starten

Sie können einen Entwicklungsserver lokal starten, indem Sie den folgenden Befehl ausführen.

npm run dev

Öffnen Sie dann Ihren Browser zu http://localhost:4200, um Ihre Site in Aktion anzuzeigen.

Anwendung in der Produktionsumgebung testen

Für die Produktion wird das Build-Skript verwendet, um den Client- und Servercode zu erstellen.

Verwenden Sie den folgenden Befehl, um das Build-Skript auszuführen:

npm run build

Dieses Skript führt zuerst den Client-Build aus und führt dann den Server-Build aus.

Stellen Sie den erstellten Dist/Server und Dist/Browser auf dem Serverrechner bereit, bevor Sie die Anwendung starten. Starten Sie ihn dann mit dem folgenden Befehl:

npm run start

Schlussfolgerung

In diesem Tutorial haben wir eine minimale Site in Angular erstellt, die auf GitHub zu finden ist. Diese Site verwendet Oracle Content Management als Headless-CMS. Nachdem Sie Oracle Content Management mit einem Kanal veröffentlichter Inhalte für das minimale Site-Tutorial eingerichtet und konfiguriert haben, wurde die Angular-Site installiert und ausgeführt, um den erforderlichen Inhalt abzurufen und die Site zu erstellen.

Weitere Informationen zu Angular finden Sie auf der Angular-Website.

Machen Sie sich mit wichtigen Oracle Content Management-Konzepten in der Dokumentation vertraut.

Weitere Beispiele finden Sie auf der Seite Oracle Content Management-Beispiele im Oracle Help Center.

---

Titel und Copyright-Informationen

Minimale Site in Angular mit Headless Oracle Content Management erstellen

F51767-01

Dezember 2021

Copyright © 2021, Oracle and/or its affiliates.

Hauptverfasser: Oracle Corporation