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.

HalloFolge beim Aufheben

Angular wurde von Google-Ingenieuren entwickelt und gepflegt, hat sich in dynamischen Webanwendungen etabliert 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. Daher ist sie für viele Entwickler die Sprache der Wahl. Angular vereinfacht die Front-End-Entwicklung, indem die HTML-Syntax erweitert wird, sodass Sie schnell Content-Management-Funktionen erstellen können.

Aufgrund der Einfachheit von Angular nutzen Entwickler diese Funktion zunehmend, um Websites mit CMS-Funktionen auszustatten.

Für Wordpress-Benutzer besteht eine beliebte Möglichkeit, Inhaltsverwaltungsfunktionen zu integrieren, darin, mit der wp-api-angular-Bibliothek zu arbeiten, mit der Sie mit der Wordpress-API und den Angular-Anwendungen interagieren können. Wenn Sie Wordpress als CMS-Plattform verwenden, können Sie mit 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 wird ButterCMS als Alternative zu Wordpress und als Beispiel für ein SaaS-basiertes Headless-CMS verwendet, das ein gehostetes CMS-Dashboard und eine Inhalts-API bietet, die Sie in 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 erfahren Sie, wie Sie eine CMS-basierte Angular-Anwendung mit Marketing-Seiten (Kundenfallstudien), einem Blog und häufig gestellten Fragen (FAQ) erstellen, die alle über die API bereitgestellt werden. Keine Server benötigt!

Installation

Zunächst müssen Sie das Angular-CLI installieren.

npm install -g @ angle / cli

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

ng neues hallo-buttercms-projekt --style = scss
cd hallo-buttercms-projekt

Installieren Sie die Pakete Angular Material und Angular Material.

npm install --save @ angular / material @ angular / cdk
npm 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: