Cara Membina Aplikasi Sudut Tanpa Serverless, CMS

Tutorial ini menunjukkan membina aplikasi sudut berkuasa CMS yang memaparkan halaman pemasaran, blog, dan bahagian FAQ, semuanya didorong oleh API kandungan. Tiada persediaan pelayan diperlukan!

Kelebihan utama:

pembangunan yang diselaraskan menggunakan integrasi lancar CLI dan Buttercms.
Pengurusan kandungan tanpa tenaga melalui CMS dan API tanpa kepala SaaS yang berasaskan ButtercMS, menghapuskan keperluan untuk infrastruktur pelayan.
Senibina tanpa pelayan berskala meminimumkan kos operasi dan memudahkan kemas kini kandungan terus dari papan pemuka ButtercMS.
Pengalaman pengguna yang dipertingkatkan dengan pengurusan kandungan dinamik untuk halaman pemasaran, kajian kes, catatan blog, dan Soalan Lazim.
aplikasi yang kuat, dikekalkan, dan berskala yang memanfaatkan kekuatan Angular dan pendekatan API ButtercMS.

Persediaan:

1. Pasang sudut CLI:

npm install -g @angular/cli

2. Buat projek sudut baru: Gunakan SCSS untuk Styling.

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

3. Pasang pakej yang diperlukan:

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

4. (Pilihan) Gunakan CDN untuk ButtercMS: secara alternatif, gunakan pakej NPM seperti yang ditunjukkan di atas.

Permulaan cepat:

1. Buat Perkhidmatan Buttercms: in , tambah: src/app/_services/buttercms.service.ts

import * as Butter from 'buttercms';

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

Ambil kandungan dalam komponen (mis.,
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;
      });
  }
}

Kandungan paparan dalam templat anda ():
3. app.component.html
Ini mengambil jawatan blog dan tajuk utama laman web. Ingatlah untuk menggantikan

dengan token API Buttercms sebenar anda. Selebihnya butiran tutorial asal yang membina kajian kes pelanggan, Soalan Lazim, dan blog penuh dengan penomboran dan penapisan, berikutan corak panggilan API yang sama dan penciptaan komponen. Langkah -langkah terperinci untuk setiap bahagian (pelanggan, FAQ, blog) ditinggalkan di sini untuk keringkasan, tetapi prinsip -prinsip teras tetap sama: Tentukan jenis kandungan dalam buttercms, membuat panggilan API dalam komponen sudut, dan memaparkan data dalam templat.

<h1>{{ headline }}</h1>
<ul>
  <li *ngFor="let post of posts">{{ post.title }}</li>
</ul>

Atas ialah kandungan terperinci Cara Membina Aplikasi Sudut Tanpa Serverless, CMS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!