Drop our API-based CMS into your Angular app in minutes.
ButterCMS provides a CMS and content API for Angular and Angular.js apps. Use ButterCMS with Angular to enable dynamic content in your apps for page content, blogs, and more.
Our CMS has a simple content API and drop-in Angular SDK.
Butter requires zero maintenance
Never worry about security upgrades, hosting, or performance.
Setup in minutes
Integrating Butter into your Angular app is dead simple. Here's a mini tutorial to get a feel for adding marketing pages to your app. You can also use our Collections to do advanced content modeling. For full an integration guide check out our Official Guide
First you would set up a new Customer Case Study page type in Butter and create a 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": "<p>We've been able to make anvils faster than ever before! - <em>Chief Anvil Maker</em></p>\r\n<p><img src=\"https://cdn.buttercms.com/NiA3IIP3Ssurz5eNJ15a\" alt=\"\" caption=\"false\" width=\"249\" height=\"249\" /></p>",
"customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",
}
}
}
To integrate this into your app, create new project
ng new buttercms-project
cd buttercms-project
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
npm install -S buttercms
ng serve
Create typescript to export ButterCMS service
Under src/app create a directory called services. Create a file called butterCMS.service.ts.
import Butter from 'buttercms';
export const butterService = Butter('your_api_token');
Inside services directory create file called index.ts to be able to import butterCMS.service into any component we want to use ButterCMS.
export * from './butterCMS.service';
Update the component routes
These components are generated by angular cli using ng g component <my-new-component>
Under src/app create a file called app-routing.module.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
const appRoutes: Routes = [
{path: 'home', component: HomeComponent},
{path: '**', redirectTo: 'home'}
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Under apps/home type ng g component homeapps/home/home/home.component.ts
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-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(protected route: ActivatedRoute) { }
public page: any;
ngOnInit() {
butterService.page.retrieve('*', 'homepage')
.then((res) => {
this.page = res.data.data;
}).catch((res) => {
console.log(res);
});
}
}
ButterCMS is an API-based, or "headless", CMS. We're a hosted service and we maintain all of the infrastructure. For more information on how we compare to a traditional CMS check out API-based CMS vs Traditional CMS.
What kind of database can I use?
No database required! We're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.
Do you host my templates?
Unlike CMS's you might be used to, we don't control or host any of your templates. The design of your app (HTML + CSS) lives in your application along side the rest of your app. Your application calls our Content API and we return your content in JSON format. You can then render this content in any way you'd like.
Can I import my content?
Yep. To import existing content from another platform, simply send us an email.
How do you compare to Wordpress?
In short, we offer all the same easy-to-use editing capabilities of Wordpress but are significantly easier for developers to setup and maintain. This means you spend less time working on your CMS and more time focusing on things important to your business.
Can I self host Butter?
No, we're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.
