So erstellen Sie eine serverlose CMS-basierte Angular-App

Dieses Tutorial ist eine Fortsetzung meines vorherigen Tutorials zum Erstellen einer serverlosen CMS-basierten Vue.js-Anwendung und zeigt Ihnen, wie Sie eine serverlose CMS-basierte Angular-App erstellen.

Angular, entwickelt und gepflegt von Google-Ingenieuren, hat einen Platz in dynamischen Webanwendungen gefunden und ist eine zunehmend gefragte Sprache. Es ist eine robuste und umfassende Sprache für die Front-End-Entwicklung, die für Unit-Tests bereit ist und daher für viele Entwickler die Sprache der Wahl ist. Angular vereinfacht das Front-End-Entwicklungserlebnis, indem die HTML-Syntax erweitert wird, damit Sie schnell Content-Management-Funktionen erstellen können.

Aufgrund der Einfachheit von Angular nutzen Entwickler diese zunehmend, um Websites CMS-Funktionen hinzuzufügen.

Für Wordpress-Benutzer besteht eine beliebte Möglichkeit zur Integration der Inhaltsverwaltungsfunktion darin, mit der wp-api-angle-Bibliothek zu arbeiten, mit der Sie mit der Wordpress-API und Angular-Anwendungen interagieren können. Wenn Sie Wordpress als CMS-Plattform verwenden, kann die Verwendung von Angular und der Wordpress-API die Ladezeiten für Inhalte auf Ihrer Seite verkürzen.

Für diejenigen, die Wordpress nicht verwenden, gibt es eine neue Generation von API-basierten CMS, die die Dinge erheblich vereinfachen. Wir werden hier ein Beispiel diskutieren.

In diesem Artikel verwenden wir ButterCMS als Alternative zu Wordpress und als Beispiel für ein SaaS-basiertes kopfloses CMS, das ein gehostetes CMS-Dashboard und eine Inhalts-API bereitstellt, die Sie von Ihrer Angular-Anwendung abfragen. Dies bedeutet, dass Sie keine neue Infrastruktur einrichten müssen, um CMS zu Ihrer Angular-App hinzuzufügen.

In diesem Tutorial wird gezeigt, wie Sie eine CMS-basierte Angular-Anwendung erstellen, die über Marketing-Seiten (Kundenfallstudien), ein Blog und häufig gestellte Fragen (FAQ) verfügt, die alle über eine API bereitgestellt werden. Keine Server benötigt!

Installation

Zunächst installieren Sie die Angular-CLI.

npm install -g @angular/cli

Richten Sie mit Angular cli ein neues Angular-Projekt ein. Standardmäßig verwendet angle-cli den CSS-Stil. Wenn Sie also das —-style=scssFlag hinzufügen, wird Angular CLI angewiesen, stattdessen SCSS zu verwenden.

ng new hello-buttercms-project --style=scsscd hello-buttercms-project

Installieren Sie Pakete für Winkelmaterial und Winkelmaterial.

npm install --save @angular/material @angular/cdknpm install --save @angular/animations

Installieren Sie ButterCMS. Führen Sie dies in Ihrer Befehlszeile aus:

npm install buttercms --save

Butter kann auch mit einem CDN geladen werden:

Schnell loslegen

Öffnen Sie das Projekt in einem Code-Editor Ihrer Wahl. Erstellen Sie unter src / app ein Verzeichnis mit dem Namen_services

Wir werden eine Datei namens erstellen butterCMS.service.js. Auf diese Weise können Sie Ihr API-Token an einem Ort aufbewahren und nicht versehentlich ändern.

import * as Butter from 'buttercms';
export const butterService = Butter('b60a008584313ed21803780bc9208557b3b49fbb');

Sie importieren diese Datei in jede Komponente, in der Sie ButterCMS verwenden möchten.

Für einen Schnellstart gehen Sie zu src/app/hello-you/hello-you.component.tsund importierenbutterService

import {butterService} from '../_services';

HelloYouComponentErstellen Sie innerhalb der Methoden:

fetchPosts() { butter.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log(‘Content from ButterCMS’) console.log(res) })}

Rufen Sie nun diese Methode beim Laden der Komponente auf, indem Sie sie dem OnInitLifecycle-Hook hinzufügen :

ngOnInit() { this.fetchPosts();}

Diese API-Anforderung ruft einen Beispiel-Blogbeitrag ab. Ihr Konto enthält einen Beispielbeitrag, den Sie in der Antwort sehen. Wenn Sie eine Antwort erhalten, bedeutet dies, dass Sie jetzt eine Verbindung zur API herstellen können.

Fügen Sie Marketing-Seiten hinzu

Das Einrichten von CMS-gestützten Seiten erfolgt in drei Schritten:

  1. Definieren Sie den Seitentyp
  2. Erstelle eine Seite
  3. Integrieren Sie in Ihre Anwendung

Seite definieren

First, create a Page Type to represent your Customer Case Study pages. Next, define the fields you want for your customer case studies. With your Page Type defined, you can now create the first case study page. Specify the name and URL of the page, and then populate the content of the page.

With your page defined, the ButterCMS API will return it in JSON format like this:

{ "data": { "slug": "acme-co", "fields": { "facebook_open_graph_title": "Acme Co loves ButterCMS", "seo_title": "Acme Co Customer Case Study", "headline": "Acme Co saved 200% on Anvil costs with ButterCMS", "testimonial": "

We’ve been able to make anvils faster than ever before! — Chief Anvil Maker

\r\n

", "customer_logo": "//cdn.buttercms.com/c8oSTGcwQDC5I58km5WV", } } }

This guide uses the Angular framework and Angular CLI to generate all the components and package our application.

Let’s get to the code.

Create new project

ng new buttercms-project --style=scsscd buttercms-projectnpm install --save @angular/material @angular/cdknpm install --save @angular/animationsnpm install -S buttercmsng serve

Your localhost:4200 should be ready to serve your Angular page.

Create typescript to export ButterCMS service

Under src/app create a directory called _services. Create a file called butterCMS.service.js.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

Update the component routes

These components are generated by Angular CLI using:

ng g component nt>

Under src/app create a file called app-routing.module.ts

import {NgModule} from '@angular/core';import {RouterModule, Routes} from '@angular/router';import {CustomerComponent} from './customer/listing/customer.listing.component';import {FaqComponent} from './faq/faq.component';import {BlogPostComponent} from './blog-post/listing/blog-post.component';import {HomeComponent} from './home/home.component';import {CustomerDetailsComponent} from './customer/details/customer.details.component';import {BlogPostDetailsComponent} from './blog-post/details/blog-post.details.component';import {FeedComponent} from './feed/feed.component';import {HelloYouComponent} from './hello-you/hello-you.component';
const appRoutes: Routes = [ {path: 'customer', component: CustomerComponent}, {path: 'customer/:slug', component: CustomerDetailsComponent}, {path: 'faq', component: FaqComponent}, {path: 'blog', component: BlogPostComponent}, {path: 'blog/:slug', component: BlogPostDetailsComponent}, {path: 'rss', component: FeedComponent}, {path: 'hello-you', component: HelloYouComponent}, {path: 'home', component: HomeComponent}, {path: '**', redirectTo: 'home'}];
@NgModule({ imports: [RouterModule.forRoot(appRoutes)], exports: [RouterModule]})export class AppRoutingModule {}

Set up the Customer List page

Under apps/customer type: ng g component

In the file apps/customer/listing/customer.listing.component.ts :

  1. Import butterService
  2. In OnInit hook, use butterService to get the list of customers
  3. Store results in pages variable and markup (HTML) will be updated with the data
import {Component, OnInit} from '@angular/core';import {butterService} from '../../_services';
@Component({ selector: 'app-customer', templateUrl: './customer.listing.component.html', styleUrls: ['./customer.listing.component.scss']})
export class CustomerComponent implements OnInit { public pages: any[]; constructor() { }
ngOnInit() { butterService.page.list(‘customer_case_study’) .then((res) => { this.pages = res.data.data; }); }}

Display the results in customer.listing.component.html

 ;Customers     

whatshot

Set up the Customer Detail page

Under apps/customer, type ng g component details .

apps/customer/details/customer.details.component.ts

Create customer page

  1. Import butterService
  2. In OnInit hook, use butterService to get the customer page given the slug in the URL path
  3. Store results in page variable and markup (HTML) will be updated with the customer data
import {Component, OnInit} from '@angular/core';import {Observable} from 'rxjs/Observable';import {ActivatedRoute} from '@angular/router';import {butterService} from '../../_services';import {map, take} from 'rxjs/operators';
@Component({ selector: 'app-customer-details', templateUrl: './customer.details.component.html', styleUrls: ['./customer.details.component.scss']})
export class CustomerDetailsComponent implements OnInit { constructor(protected route: ActivatedRoute) { }
 protected slug$: Observable; public page: any;
 ngOnInit() { this.slug$ = this.route.paramMap .pipe( map(params => (params.get('slug'))) );
 this.slug$.pipe( take(1)) .subscribe(slug => { butterService.page.retrieve('customer_case_study', slug) .then((res) => { this.page = res.data.data; }).catch((res) => { console.log(res); }); }); } }

Display the results in customer.details.component.html

 

 

{{page.fields.headline}}

Testimonials

You can now navigate to the Customer Page via the list of all Customer Pages or directly via URL.

Add a knowledge base

Set up content fields

Let’s suppose you want to add a CMS to a static FAQ page with a title and a list of questions with answers.

Making your content dynamic with Butter is a two-step process:

  1. Setup custom content fields in Butter
  2. Integrate the fields into your application

To setup custom content fields, first sign in to the Butter dashboard.

Create a new workspace or click on an existing one. Workspaces let you organize content fields in a friendly way for content editors and have no effect on development or the API. For example, a real-estate website might have a workspace called “Properties” and another called “About Page”.

Original text


Once you’re in a workspace click the button to create a new content field. Choose the “Object” type and name the field “FAQ Headline.”

After saving, add another field, but this time choose the “Collection” type and name the field FAQ Items .

On the next screen, setup two properties for items in the collection.

Now go back to your workspace and update your heading and FAQ items.

Integrate your app

Create FAQ Component

Under apps type: ng g component faq

apps/faq/faq.component.ts

Set up onInit hook to load FAQ

import {Component, OnInit} from '@angular/core';import {butterService} from '../_services';
@Component({ selector: 'app-faq', templateUrl: './faq.component.html', styleUrls: ['./faq.component.scss']})
export class FaqComponent implements OnInit { constructor() {}
 public faq: any = { items: [], title: 'FAQ' };
ngOnInit() { butterService.content.retrieve(['faq_headline', 'faq_items']) .then((res) => { console.log(res.data.data); this.faq.title = res.data.data.faq_headline; this.faq.items = res.data.data.faq_items; }); }}

Display the result

      

; {{item.question}}

The values entered in the Butter dashboard will immediately update the content in our app.

Blogging

To display posts, you need to create a /blog route in your app and fetch blog posts from the Butter API, as well as a /blog/:slug route to handle individual posts.

See the API reference for additional options such as filtering by category or author. The response also includes some metadata we’ll use for pagination.

Set up Blog Homepage

Under apps/blog-post, type: ng g component listing .

apps/blog-post/listing/blog-post.listing.component.ts

Update component to get all posts:

  1. Import butterService
  2. Get all post onInit
import {Component, OnInit} from '@angular/core';import {butterService} from '../../_services';
@Component({ selector: 'app-blog-post', templateUrl: './blog-post.component.html', styleUrls: ['./blog-post.component.scss']})export class BlogPostComponent implements OnInit { public posts: any[];
 constructor() { }
ngOnInit() { butterService.post.list({ page: 1, page_size: 10}).then((res) => { console.log(res.data) this.posts = res.data.data; }); }}

Display the result:

 Blog Posts;    
  ; 

;

 whatshot 

Set up Blog Post page

Under apps/blog-post, type: ng g component details

apps/blog-post/details/blog-post.details.component.ts

To show a single post:

  1. Import butterService
  2. In OnInit hook, use butterService to get the blog-post post given the slug in the URL path
  3. Store results in post variable and markup (HTML) will be updated with the customer data
import {Component, OnInit, ViewEncapsulation} from '@angular/core';import {Observable} from 'rxjs/Observable';import {ActivatedRoute} from '@angular/router';import {butterService} from '../../_services';import {map, take} from 'rxjs/operators';
@Component({ selector: 'app-blog-post-details', templateUrl: './blog-post.details.component.html', styleUrls: ['./blog-post.details.component.scss'], encapsulation: ViewEncapsulation.None})
export class BlogPostDetailsComponent implements OnInit {
 constructor(protected route: ActivatedRoute) { }
 protected slug$: Observable; public post = { meta: null, data: null};
ngOnInit() { this.slug$ = this.route.paramMap .pipe( map(params => (params.get('slug'))) );
 this.slug$.pipe( take(1)) .subscribe(slug => { butterService.post.retrieve(slug) .then((res) => { this.post = res.data; }).catch((res) => { console.log(res); }); }); }}

Display the result:

 

{{post.data.title}} < ;> ; {{post.data.author.first_name}} {{post.data.author.last_name}}

Now your app has a working blog that can be updated easily in the ButterCMS dashboard.

Categories, tags, and authors

Use Butter’s APIs for categories, tags, and authors to feature and filter content on your blog.

List all categories and get posts by category

Call these methods on the onInit() lifecycle hook:

methods: { ... getCategories() { butter.category.list() .then((res) => { console.log('List of Categories:') console.log(res.data.data) }) }, getPostsByCategory() { butter.category.retrieve('example-category', { include: 'recent_posts' }) .then((res) => { console.log('Posts with specific category:') console.log(res) }) } }, created() { ... this.getCategories() this.getPostsByCategory()}
 getCategories() { butter.category.list() .then((res) => { console.log(‘List of Categories:’) console.log(res.data.data) }) }, getPostsByCategory() { butter.category.retrieve(‘example-category’, { include: ‘recent_posts’ }) .then((res) => { console.log(‘Posts with specific category:’) console.log(res) }) }},created() { … this.getCategories() this.getPostsByCategory()}

Wrap up

Congrats, you’ve successfully turned your static Angular application into a CMS-powered app using content APIs and thereby maintaining a serverless architecture. Your development team can take advantage of the time-saving aspects of Angular, and you’ve saved even more time by using a serverless CMS.

If you’ve enjoyed this article, please help it spread by clapping below! For more content like this, follow us on Twitter and subscribe to our blog.

And if you want to add a blog or Angular CMS to your website without messing around with Wordpress, you should try Butter CMS.