Creación de un sitio mínimo angular con Oracle Content Management sin cabecera

Introducción

Angular es una plataforma para crear aplicaciones web para equipos móviles y de escritorio.

Para consumir nuestro contenido de Oracle Content Management en una aplicación angular, podemos utilizar el ejemplo mínimo angular disponible como repositorio de código abierto en GitHub.

En este tutorial, crearemos un sitio mínimo simple en Angular con Oracle Content Management como CMS sin cabecera, además de su kit de desarrollo de software (SDK) para la entrega de contenido en JavaScript. Este ejemplo angular está disponible en GitHub.

El tutorial incluye tres pasos:

  1. Preparación de Oracle Content Management
  2. Crear el sitio mínimo en Angular
  3. Preparar la aplicación para el despliegue

Requisitos

Antes de continuar con este tutorial, le recomendamos que lea primero la siguiente información:

Para seguir este tutorial, necesitará:

Lo que estamos creando

Con Angular minimalista, puede recuperar fácilmente imágenes y otro contenido de su repositorio de Oracle Content Management.

Para echar un vistazo a lo que estamos creando, este es el estado final de nuestro tutorial, un sitio básico angular mínimo que consume contenido de Oracle Content Management:

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

Este es el aspecto que tendrá la página inicial al final de este tutorial:

En esta imagen se muestra una página de llegada para un sitio mínimo angular.

Este es el aspecto que tendrá la página de contacto al final de este tutorial:

En esta imagen, se muestra la página de contacto para un sitio mínimo angular.

Para continuar, necesitará tener una suscripción activa a Oracle Content Management y estar conectado con el rol de administrador de contenido.

Tarea 1: Preparación de Oracle Content Management

Si aún no tiene una instancia de Oracle Content Management, consulte Inicio rápido para obtener más información sobre cómo registrarse en Oracle Cloud, aprovisionar una instancia de Oracle Content Management y configurar Oracle Content Management como un CMS sin cabecera.

Para este tutorial, necesitará crear un modelo de contenido. Hay un paquete de activos descargable disponible que rellena el repositorio vacío con tipos de contenido y contenido asociado.

Para preparar Oracle Content Management:

  1. Cree un canal y un repositorio de activos.
  2. Cree un modelo de contenido mediante uno de estos dos métodos:

Creación de un canal y un repositorio de activos

Primero debe crear un canal y un repositorio de activos en Oracle Content Management para poder publicar contenido.

Para crear un canal y un repositorio de activos en Oracle Content Management:

  1. Conéctese a la interfaz web de Oracle Content Management como administrador.

  2. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, seleccione Publicar canales en la lista de selección de la cabecera de página.

    En esta imagen se muestra la opción Canales de publicación seleccionada en el menú desplegable de la cabecera de la página Contenido.

  3. En la esquina superior derecha, haga clic en Crear para crear un nuevo canal. Asigne el nombre 'OCEMinimalChannel' al canal para este tutorial y mantenga el acceso público. Haga clic en Guardar para crear el canal.

    En esta imagen se muestra el panel de definición de canal de publicación, con 'OCEMinimalChannel' en el campo de nombre de canal.

  4. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, elija Repositorios en la lista de selección de la cabecera de página.

    En esta imagen se muestra la opción Repositories seleccionada en el menú desplegable de la cabecera de la página Content.

  5. En la esquina superior derecha, haga clic en Crear para crear un nuevo repositorio de activos. Asigne al repositorio de activos el nombre 'OCEMinimalRepository' para este tutorial.

    En esta imagen se muestra el panel de definición del repositorio, con 'OCEMinimalRepository' en el campo de nombre del repositorio.

  6. En el campo Canales de publicación, seleccione el canal OCEMinimalChannel para indicar a Oracle Content Management que el contenido del repositorio OCEMinimalRepository se puede publicar en el canal OCEMinimalChannel. Haga clic en Guardar cuando termine.

    En esta imagen se muestra el panel de definición del repositorio, con 'OCEMinimalChannel' en el campo Canales de publicación.

Creación de un modelo de contenido

El siguiente paso es crear un modelo de contenido. Puede utilizar uno de los siguientes métodos:

Importación del paquete de activos de muestras de Oracle Content Management

Puede descargar un paquete de activos de ejemplo de Oracle Content Management preconfigurado que contiene todos los tipos de contenido y activos necesarios para este tutorial. Si lo prefiere, también puede crear su propio modelo de contenido en lugar de descargar el paquete de activos de ejemplo.

Puede cargar una copia del contenido que estamos utilizando en este tutorial desde Oracle Content Management Samples Asset Pack. Esto le permitirá experimentar con los tipos de contenido y modificar el contenido. Si desea importar el paquete de activos de muestras de Oracle Content Management, puede descargar el archivo de paquete de activos, OCESamplesAssetPack.zip y extraerlo a un directorio de su elección:

  1. Descargue el paquete de activos de muestras de Oracle Content Management (OCESamplesAssetPack.zip) desde la página de descargas de Oracle Content Management. Extraiga el archivo zip descargado en una ubicación de la computadora. Después de la extracción, esta ubicación incluirá un archivo denominado OCEMinimal_data.zip.

  2. Conéctese a la interfaz web de Oracle Content Management como administrador.

  3. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, elija Repositorios en la lista de selección de la cabecera de página. A continuación, seleccione OCEMinimalRepository y haga clic en el botón Importar contenido de la barra de acción superior.

    En esta imagen se muestra la página Repositories, con el elemento OCEMinimalRepository seleccionado.

  4. Cargue OCEMinimal_data.zip desde su equipo local en la carpeta Documentos.

    En esta imagen se muestra la pantalla de confirmación de carga para el archivo OCEMinimal_data.zip.

  5. Una vez que se haya cargado, seleccione OCEMinimal_data.zip y haga clic en Aceptar para importar el contenido en su repositorio de activos.

    En esta imagen se muestra el archivo OCEMinimal_data.zip seleccionado con el botón Aceptar activado.

  6. Una vez que el contenido se haya importado correctamente, vaya a la página Activos y abra el repositorio OCEMinimalRepository. Verá que ahora se han agregado todas las imágenes y los elementos de contenido relacionados al repositorio de activos.

    En esta imagen se muestra el repositorio OCEMinimalRepository, con todos los activos que se acaban de importar.

  7. Haga clic en Seleccionar todo en la parte superior izquierda y, a continuación, en Publicar para agregar todos los activos importados al canal de publicación creado anteriormente, OCEGettingStartedChannel.

    En esta imagen se muestra el repositorio OCEMinimalRepository, con todos los activos seleccionados y la opción Publicar en la barra de acción visible.

  8. Antes de publicar, debe validar todos los activos. Primero agregue OCEMinimalChannel como canal seleccionado y, a continuación, haga clic en el botón Validar.

    En esta imagen se muestra la página Resultados de validación, con el canal OCEMinimalChannel agregado en el campo Canales, todos los activos que se van a validar y el botón Validar activado.

  9. Después de validar los activos, puede publicar todos los activos en el canal seleccionado haciendo clic en el botón Publicar en la esquina superior derecha.

    En esta imagen se muestra la página Resultados de validación, con el canal OCEMinimalChannel agregado en el campo Canales, todos los activos validados y el botón Publicar activado.

Una vez hecho esto, puede ver en la página Activos que todos los activos se han publicado. (Puede indicar el icono situado encima del nombre del activo).

En esta imagen se muestra la página Activos, con todos los activos pubidos.

Después de importar el paquete de activos de muestras de Oracle Content Management, puede comenzar a crear el sitio mínimo en React.

Crear su propio modelo de contenido

En lugar de importar el paquete de activos de muestras de Oracle Content Management, también puede crear su propio modelo de contenido.

Para este tutorial, estamos utilizando un tipo de contenido denominado 'MinimalMain' como tipo de contenido principal para este ejemplo. Este tipo de contenido consta de logotipos de cabecera y pie de página, así como una lista de páginas que se deben incluir en la navegación.

En esta imagen, se muestra la página inicial del ejemplo Minimal.

Para crear tipos de contenido para el modelo de contenido:

  1. Conéctese a la interfaz web de Oracle Content Management como administrador.
  2. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, seleccione Tipos de activos en la lista de selección de la cabecera de página.
  3. Haga clic en Crear en la esquina superior derecha.
  4. Elija crear un tipo de contenido (no un tipo de activo digital). Repita esta acción para todos los tipos de contenido necesarios.

En esta imagen se muestra el cuadro de diálogo Crear tipo de activo en la interfaz web de Oracle Content Management.

Crearemos tres tipos de contenido, cada uno con su propio juego de campos:

El primer tipo de contenido, MinimalMain, debe tener los siguientes campos:

Nombre mostrado Tipo de campo necesario Nombre de máquina
headerLogo Campo de medios de valor único headerLogo
footerLogo Campo de medios de valor único footerLogo
páginas Campo de referencia de varios valores Páginas

Es el aspecto que debe tener la definición del tipo de contenido MinimalMain:

En esta imagen se muestra la definición del tipo de contenido 'MinimalMain'. Incluye estas páginas de campos de datos: headerLogo, footerLogo.

El segundo tipo de contenido, MinimalPage, debe tener el siguiente campo:

Nombre mostrado Tipo de campo necesario Nombre de máquina
secciones Campo de referencia de varios valores secciones

Este es el aspecto del tipo de contenido MinimalPage:

En esta imagen se muestra la definición del tipo de contenido 'MinimalPage'. Incluye este campo de datos: secciones.

El tercer y último tipo de contenido, MinimalSection, deben tener los siguientes campos:

Nombre mostrado Tipo de campo necesario Nombre de máquina
tipo Campo de texto de un solo valor X tipo
cabecera Campo de texto de un solo valor cabecera
body Campo de texto grande de valor único body
imagen Campo de imagen de valor único imagen
acciones Campo de contenido embebido de valor único acciones

Este es el aspecto del tipo de contenido MinimalSection:

En esta imagen se muestra la definición del tipo de contenido 'MinimalSection'. Incluye estos campos de datos: tipo, cabecera, cuerpo, imagen, acciones.

Una vez que haya creado los tipos de contenido, puede agregar estos tipos de contenido al repositorio que ha creado anteriormente, OCEMinimalRepository:

  1. Conéctese a la interfaz web de Oracle Content Management como administrador.
  2. Navegue hasta OCEMinimalRepository.
  3. Edite el repositorio y, en Tipos de activos, especifique los tres tipos de contenido recién creados. Haga clic en el botón Save (Guardar) para guardar los cambios.

En esta imagen se muestra la página Editar repositorio de Oracle Content Management, con los tres tipos de contenido recién creados asociados al repositorio OCEMinimalRepository.

Después de agregar los tipos de contenido al repositorio, puede abrir el repositorio OCEMinimalRepository en la página Activos y empezar a crear los elementos de contenido para todos los tipos de contenido.

En esta imagen se muestran los elementos de contenido de la página Activos de la interfaz web de Oracle Content Management, con opciones a la izquierda para recopilaciones, canales, idiomas, tipos, selección de elementos de contenido y estado.

Tarea 2: Creación del sitio mínimo en Angular

Para consumir nuestro contenido de Oracle Content Management en una aplicación Angular representada en el servidor, podemos utilizar el ejemplo de sitio mínimo angular, que está disponible como repositorio de código abierto en GitHub.

Nota: Recuerde que el uso del ejemplo angular es opcional y lo utilizamos en este tutorial para empezar a utilizarlo rápidamente. También puede crear su propia aplicación Angular.

Para crear el sitio mínimo en Angular:

  1. Clonar el repositorio de ejemplo e instalar dependencias
  2. Configuración de la aplicación angular
  3. Trabajar con el SDK de Oracle Content Management Content
  4. Uso del SDK de contenido para recuperar el contenido

Clonación del repositorio de ejemplo e instalación de dependencias

El ejemplo de sitio mínimo angular está disponible como repositorio de código abierto en GitHub.

Primero deberá clonar el ejemplo de GitHub en el equipo local y cambiar el directorio a la raíz del repositorio:

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

Ahora que tiene su base de código, debe descargar dependencias para la aplicación. Ejecute el siguiente comando desde el directorio raíz:

npm install

Configuración de la aplicación angular

En este ejemplo de sitio angular mínimo, debe configurar algunos datos para que el SDK de Oracle Content Management Content (y cualquier otra solicitud) pueda dirigirse a la URL de instancia y la versión de API correctas con el token de canal correcto. Estos valores se utilizan en src/scripts/server-config-utils.js para instanciar un nuevo cliente de entrega.

Esta aplicación utiliza un archivo .env que lee Webpack cuando agrupa las aplicaciones cliente y servidor. Mediante webpack.DefinePlugin, los valores leídos del archivo .env se pueden poner a disposición de cualquier parte de la aplicación.

Abra el archivo .env en un editor de texto. Verá lo siguiente:

# 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

Cambie cada par clave-valor para reflejar la URL de la instancia, la versión de API a la que desea dirigirse y el token de canal asociado al canal de publicación. El canal de este tutorial es OCEMinimalChannel.

Trabajar con el SDK de Oracle Content Management Content

Oracle Content Management ofrece un SDK para ayudar a detectar y utilizar contenido en sus aplicaciones. El SDK se publica como un módulo NPM y el proyecto se aloja en GitHub.

Obtenga más información sobre el SDK aquí.

El SDK se ha registrado como una dependencia de tiempo de ejecución de este proyecto en el archivo package.json.

Uso del SDK de contenido para recuperar el contenido

Ahora podemos aprovechar el SDK de contenido para recuperar contenido de forma que podamos presentarlo en nuestra aplicación Angular.

El SDK de contenido utiliza un objeto DeliveryClient para especificar el punto final. Puede realizar todas las solicitudes con ese objeto de cliente.

La carpeta src/scripts contiene el código para obtener datos de Oracle Content Management mediante el SDK de contenido.

El archivo src/scripts/server-config-utils.js importa el SDK de contenido y, a continuación, crea un cliente de entrega mediante la configuración especificada en .env.

El siguiente comando importa el SDK:

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

El siguiente comando crea el cliente de entrega:

return createDeliveryClient(serverconfig);

El archivo src/scripts/services.js contiene funciones para obtener los datos de esta aplicación mínima de React.

El método fetchOceMinimalMain() recupera el tipo de contenido MinimalMain con un fragmento de minimalmain.

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;
    }

Para presentar las imágenes, services.js proporciona un método auxiliar para recuperar el juego de orígenes de un activo que se construye a partir de las entregas para el activo.

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;
    }

El método fetchPage() recupera el tipo de contenido MinimalPage utilizando el valor de depuración para la página obtenida de la consulta anterior.

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

El método getRenditionURLs() recupera las URL de representación de cualquier imagen que se pueda definir en una sección mediante el ID de esa imagen. Esta llamada se realiza en el cliente.

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));
    }

Ahora que tenemos nuestra consulta de datos, podemos presentar las respuestas en nuestros componentes angulares.

Representación del Cliente frente al del Servidor

Con la representación de cliente (CSR), el cliente es responsable de crear y representar el contenido de una página web mediante JavaScript. Con la representación de servidor (SSR), toda la página se crea en el servidor y se devuelve al cliente una página web completa.

Cuando se solicita la página web del servidor en la representación del cliente, el documento HTML devuelto contiene HTML de esqueleto y no contiene contenido real. Contiene una referencia a un paquete JavaScript, que el cliente solicita del servidor. Al recibir este paquete, el cliente ejecuta JavaScript y rellena la página web. Hasta que el cliente haya terminado de ejecutar JavaScript, todo el usuario ve una página web en blanco. Una desventaja de las aplicaciones representadas por el cliente es que cuando algunos exploradores web indexan el sitio, no hay contenido real que indexar.

Con la representación de servidor (SSR), toda la página se crea en el servidor y se devuelve al cliente una página web completa. La ventaja de esto es que los exploradores web pueden indexar todo el contenido en la página web.

Representación Angular del Servidor

El flujo de la aplicación de galería de imágenes angulares es el siguiente:

  1. El cliente realiza una solicitud al servidor para una ruta determinada.
  2. El servidor Express recibe la solicitud.
  3. El servidor Express transfiere todas las solicitudes del cliente para las páginas al motor Express de Angular Univeral
  4. El motor Express de Angular Univeral toma un archivo HTML de plantilla y lo rellena con lo siguiente
    1. Marcado de la ruta indicada
    2. Datos de ruta serializados
    3. Referencias a cualquier hoja de estilo
    4. Referencias a paquetes de JavaScript para ejecutar en el cliente
  5. El servidor Express devuelve el documento HTML creado por el motor Express de Angular Univeral al cliente
  6. El cliente recibe el HTML y lo representa. El usuario verá una página web totalmente formada.
  7. El cliente solicita cualquier paquete JavaScript del servidor. Después de recibirlo, el cliente ejecuta JavaScript en el paquete.
    1. "hidrata" el HTML, agregando en cualquier JavaScript del cliente como listeners de eventos.
    2. Angular toma automáticamente los datos serializados de la página e los inyecta en el código JavaScript para que estén disponibles para los componentes.
  8. Si el documento HTML contenía una hoja de estilo, el cliente solicita la hoja de estilo.

La CLI angular admite la adición de soporte de representación del servidor a una aplicación angular existente. Consulte https://angular.io/guide/universal para obtener más información.

Servidor Express del Servidor

La aplicación de servidor utiliza un servidor Express para recibir la solicitud y reenviarla al motor Express de Angular Univeral.

El archivo del servidor Express se encuentra en server.js. Este archivo lo crea la CLI angular al agregar soporte de representación del servidor.

Componentes angulares

Los componentes angulares se escriben en TypeScript y definen una plantilla que define la vista. Estas plantillas contienen HTML, directivas angulares y marcas de enlace normales, que permiten a Angular ajustar el HTML antes de que se represente.

En las siguientes secciones se ofrece una visión general de cómo Angular presenta nuestra aplicación en cada uno de nuestros componentes:

Módulo de aplicación

Módulo de aplicación ubicado en src/app/app.module.ts. Inicia la aplicación con el componente de aplicación.

Este archivo define las distintas rutas de nuestra aplicación. En nuestro sitio, queremos proporcionar dos rutas: - la ruta raíz (/) - y una ruta de página (/page/:slug)

La ruta raíz se redirige a la ruta de página sin ningún segmento de página especificado. La ruta de página define el solucionador PageDataResolver, que se utiliza para obtener todos los datos necesarios para la ruta antes de crear los componentes de la ruta.

Abra el componente raíz, ubicado en src/app/app.module.ts, y consulte las rutas definidas:

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

Este módulo de aplicación es el punto de entrada al presentar la aplicación en el cliente.

Módulo raíz para representación del servidor

El punto de entrada principal de esta aplicación Angular, al presentar la aplicación en el servidor, es el módulo de servidor de aplicaciones ubicado en src/app/app.server.module.ts.

Este módulo importa el módulo de aplicación, ubicado en src/app/app.server.module.ts, junto con ServerModule de Angular. La aplicación del servidor inicia el mismo componente de aplicación que el cliente y utiliza todos los mismos componentes.

La CLI angular crea el archivo del módulo de servidor al agregar soporte de representación del servidor.

Solucionador de datos de página

El solucionador de datos de página, ubicado en src/resolvers/page-data.resolver.ts, gestiona la obtención de los datos que se van a representar en las páginas.

Cuando el cliente se está hidratando, estos datos se obtienen de transferState que se ha rellenado durante la representación del servidor y se han serializado en el documento HTML devuelto al cliente.

Durante la representación del servidor o la representación del cliente cuando se ha producido la navegación del cliente, transferState no contendrá los datos. Los datos se obtienen del servidor de Oracle Content Management mediante el SDK de contenido.

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;
        });
      });

Componente de aplicación

El componente de aplicación, ubicado en src/app/app.component.ts, define la vista raíz.

Este componente contiene las etiquetas de enlace de enrutador. Angular intercambiará componentes dentro y fuera de la página dentro de esas etiquetas, según la ruta actual.

Los componentes de cabecera y pie de página se utilizan para mostrar la cabecera y el pie de página respectivamente.

Los datos de cabecera se transfieren al componente de cabecera, ubicado en src/app/header/header.component.ts, y los datos de pie de página se transfieren al componente Footer, ubicado en src/app/footer/footer.component.ts. Los componentes de cabecera y pie de página simplemente utilizan los datos que se transfieren a ellos; no obtienen datos adicionales del servidor. Consulte los enlaces en src/app/header/header.component.html y src/app/footer/footer.component.html.

Componente de sección

El componente Section, ubicado en src/app/ections/ections.component.ts, lo utiliza el componente Page y se utiliza para representar cualquier elemento de contenido del tipo MinimalSection.

Este componente tiene datos transferidos desde el componente Page y, si los datos de sección tienen una imagen, realiza una llamada de cliente para obtener las URL de representación para la imagen desde el servidor.

  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;
          });
        }
      }

Componente de Página

El componente Page es responsable de representar la cabecera, el pie de página y todas las secciones definidas para una página.

Abra el componente Page, ubicado en src/app/page/page.component.ts. En ngOnInit puede ver que el componente obtiene los datos de la ruta activa, que ha rellenado el solucionador de la página inicial.

  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;
        }
      }

El marcador del componente de página se encuentra en src/app/page/page.component.html.

Tarea 3: Preparación de la aplicación para el despliegue

Ahora que hemos creado nuestro sitio Angular minimalista, debemos verlo en un servidor de desarrollo local para depurar cualquier problema y obtener una previsualización de la aplicación antes de que se active.

Prepare la aplicación para el despliegue en dos pasos:

  1. Puesta en marcha de un servidor de desarrollo local
  2. Pruebe la aplicación en el entorno de producción

Introducción a un servidor de desarrollo local

Puede iniciar un servidor de desarrollo localmente ejecutando el siguiente comando.

npm run dev

A continuación, abra el explorador en http://localhost:4200 para ver el sitio en acción.

Prueba de la aplicación en el entorno de producción

Para la producción, el script de creación se utilizaría para crear el código de cliente y servidor.

Utilice el siguiente comando para ejecutar la secuencia de comandos de creación:

npm run build

Este script ejecuta primero la creación del cliente y, a continuación, ejecuta la creación del servidor.

Despliegue el dist/servidor y el dist/explorador integrados en la máquina del servidor antes de iniciar la aplicación. A continuación, utilice el siguiente comando para iniciarlo:

npm run start

Conclusión

En este tutorial, creamos un sitio mínimo en Angular, que se puede encontrar en GitHub. Este sitio utiliza Oracle Content Management como CMS sin cabecera. Después de configurar Oracle Content Management con un canal de contenido publicado para el tutorial mínimo del sitio, hemos instalado y ejecutado el sitio Angular para recuperar el contenido necesario y crear el sitio.

Para obtener más información sobre Angular, visite el sitio web de Angular.

Obtenga información sobre los conceptos importantes de Oracle Content Management en la documentación.

Puede encontrar más ejemplos como este en la página Ejemplos de Oracle Content Management en el Centro de ayuda de Oracle.