如何構建無服務器的CMS驅動的角度應用程序

>本教程演示了建立一個由營銷頁面，博客和FAQ部分的CMS驅動的角度應用程序，所有這些都由內容API驅動。 不需要服務器設置！

鍵優點：

使用角CLI和buttlecms的無縫集成進行了簡化的開發。
• > 通過Buttlecms的基於SaaS的無頭CM和API輕鬆的內容管理，消除了對服務器基礎架構的需求。
• >可擴展的無服務器體系結構最小化運營成本並直接從buttercms儀表板中簡化內容更新。
• 增強了用戶體驗，並在營銷頁面，案例研究，博客文章和常見問題上進行動態內容管理。
• >可靠，可維護且可擴展的應用利用Angular的強度和buttercms的API驅動方法。
• 設置：

安裝Angular CLI：

>
>

創建一個新的Angular項目：使用SCSS進行樣式。

npm install -g @angular/cli

安裝必要的軟件包：

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

3. （可選）使用cdn進行buttercms：
另外，使用NPM軟件包，如上圖所示。

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

4. 快速啟動：

>

創建buttercms服務： in>，add：

1. >在組件中獲取內容（例如，src/app/_services/buttercms.service.ts）：

import * as Butter from 'buttercms';

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

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

>

3. 此獲取博客文章和主頁標題。 切記用實際的buttercms api代幣替換app.component.html。 原始教程的其餘部分詳細介紹了構建客戶案例研究，常見問題解答以及帶有分頁和過濾的完整博客，遵循類似的API調用和組件創建模式。 此處省略了每個部分（客戶，常見問題，博客）的詳細步驟，但核心原則保持不變：在buttercms中定義內容類型，用角度組件進行API調用，然後在模板中顯示數據。 >

以上是如何構建無服務器的CMS驅動的角度應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！