サーバーレスのCMS搭載の角度アプリケーションを構築する方法-jsチュートリアル-php.cn

サーバーレスのCMS搭載の角度アプリケーションを構築する方法

Lisa Kudrow

リリース： 2025-02-15 11:15:12

オリジナル

302 人が閲覧しました

このチュートリアルでは、マーケティングページ、ブログ、FAQセクションを備えたCMSを搭載したAngularアプリケーションの構築を実証しています。これらはすべてコンテンツAPIによって駆動されます。サーバーのセットアップは必要ありません！

How to Build a Serverless, CMS-powered Angular Application

重要な利点：

Angular CLIとButterCMSのシームレスな統合を使用した

ButterCMSのSaaSベースのヘッドレスCMSおよびAPIを介した楽なコンテンツ管理により、サーバーインフラストラクチャの必要性が排除されます。
マーケティングページ、ケーススタディ、ブログ投稿、FAQの動的コンテンツ管理を備えたユーザーエクスペリエンスの強化。
セットアップ：

Angular CLIのインストール：

新しい角度プロジェクトを作成します

npm install -g @angular/cli

ログイン後にコピー

必要なパッケージをインストールする：

ng new my-angular-cms --style=scss
cd my-angular-cms

ログイン後にコピー

（オプション）buttercmsにcdnを使用してください：または、上記のようにNPMパッケージを使用します。

クイックスタート：

npm install --save @angular/material @angular/cdk @angular/animations buttercms

ログイン後にコピー

buttercmsサービスを作成：

、add：

コンポーネントでコンテンツを取得する（例：）： src/app/_services/buttercms.service.ts

import * as Butter from 'buttercms';

export const butterService = Butter('YOUR_API_TOKEN'); // Replace with your API token

ログイン後にコピー

テンプレートにコンテンツを表示（）：src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { butterService } from './_services/buttercms.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  posts: any[] = [];
  headline: string = '';

  constructor(private butter: butterService) {}

  ngOnInit(): void {
    this.fetchPosts();
    this.fetchHeadline();
  }

  fetchPosts() {
    this.butter.post.list({ page: 1, page_size: 10 })
      .then((res) => {
        this.posts = res.data.data;
      });
  }

  fetchHeadline() {
    this.butter.content.retrieve(['homepage_headline'])
      .then((res) => {
        this.headline = res.data.data.homepage_headline;
      });
  }
}

ログイン後にコピー

これは、ブログの投稿とホームページの見出しを取得します。

を実際のButterCMS APIトークンに置き換えることを忘れないでください。元のチュートリアルの残りの部分では、API呼び出しとコンポーネント作成の同様のパターンに従って、顧客ケーススタディ、FAQ、およびページネーションとフィルタリングを備えた完全なブログを構築します。各セクションの詳細な手順（顧客、FAQ、ブログ）は簡潔にするためにここで省略されていますが、コア原則は同じままです。ButterCMSでコンテンツタイプを定義し、AngularコンポーネントでAPI呼び出しを行い、テンプレートにデータを表示します。 >

以上がサーバーレスのCMS搭載の角度アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。