CMS for your Angular app

Angular has become one of the most widely used web development frameworks. With features like powerful data binding, dependency injection, declarative templates and so on, it really impresses when building those single-page applications (SPAs). In this article, we’ll see how we can use Dialoguewise, a SaaS-based headless CMS to power the contents of your app. This means you don’t need to spin up any new infrastructure to add CMS to your Angular app.

Firstly, let’s install the Dialoguewise NPM module

npm i dialogue-wise

Next, we will need to import the Dialoguewise module into the app.module. As part of this you will need to add

import {DialogueWiseModule} from ‘dialogue-wise’;

and DialogueWiseModule under imports. Your code should now look something like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import {DialogueWiseModule} from 'dialogue-wise';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DialogueWiseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you are ready to call the Dialoguewise API from your component and get the content. You will need to now prepare the payload for which you will need to pass the apiKey, dialogueName and emailHash.

var request:DialogueWiseRequest = new DialogueWiseRequest();
    request.apiKey=""; //Your API Key
    request.slug=""; //The name of the dialogue which contains your content.
    request.emailHash=''; //The email hash

If your dialogue uses variables and you wish to pass variable values then you will need to set the variableList property as well.

You’re all set now. You can call the getDialogue method and pass the payload. In just about three steps you are ready to go with your angular app cms.

You can also have a look at the sample project available on Github which can give you a better understanding.

You may also use Dialoguewise with other front-end technologies like React, Vue.js or even Node.js

Get started with Dialoguewise and see how you can benefit from front-end content management solutions.