如何构建无服务器的CMS驱动的角度应用程序

>本教程演示了建立一个由营销页面，博客和FAQ部分的CMS驱动的角度应用程序，所有这些都由内容API驱动。 不需要服务器设置！

键优点：

使用角CLI和buttlecms的无缝集成进行了简化的开发。
• > 通过Buttlecms的基于SaaS的无头CM和API轻松的内容管理，消除了对服务器基础架构的需求。
• >可扩展的无服务器体系结构最小化运营成本并直接从buttercms仪表板中简化内容更新。
• 增强了用户体验，并在营销页面，案例研究，博客文章和常见问题上进行动态内容管理。
• >可靠，可维护且可扩展的应用利用Angular的强度和buttercms的API驱动方法。
• 设置：

安装Angular CLI：

>
>

创建一个新的Angular项目：使用SCSS进行样式。

<code class="language-bash">npm install -g @angular/cli</code>

安装必要的软件包：

<code class="language-bash">ng new my-angular-cms --style=scss
cd my-angular-cms</code>

3. （可选）使用cdn进行buttercms：
另外，使用NPM软件包，如上图所示。

<code class="language-bash">npm install --save @angular/material @angular/cdk @angular/animations buttercms</code>

4. 快速启动：

>

创建buttercms服务： in>，add：

1. >在组件中获取内容（例如，src/app/_services/buttercms.service.ts）：

<code class="language-typescript">import * as Butter from 'buttercms';

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

2. src/app/app.component.ts在模板中显示内容（
）：

<code class="language-typescript">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;
      });
  }
}</code>

>

3. 此获取博客文章和主页标题。 切记用实际的buttercms api代币替换app.component.html。 原始教程的其余部分详细介绍了构建客户案例研究，常见问题解答以及带有分页和过滤的完整博客，遵循类似的API调用和组件创建模式。 此处省略了每个部分（客户，常见问题，博客）的详细步骤，但核心原则保持不变：在buttercms中定义内容类型，用角度组件进行API调用，然后在模板中显示数据。 >

以上是如何构建无服务器的CMS驱动的角度应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！