Как создать безсерверное угловое приложение на базе CMS

На следующем экране настройте два свойства для элементов в коллекции.

Теперь вернитесь в рабочее пространство и обновите заголовки и часто задаваемые вопросы.

Интегрировать ваше приложение

Создать FAQ FAQ

Под apps введите ng g component faq .

 apps/faq/faq.component.ts 

Установите хук onInit для загрузки 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; }); } } 

Показать результат

 <mat-card> <mat-card-title class="page-title"></mat-card-title> <mat-divider></mat-divider> <mat-card-content class="page-body"> <mat-card *ngFor="let item of faq.items"> <mat-card-content> <h3> {{item.question}} </h3> <div> {{item.answer}} </div> </mat-card-content> </mat-card> </mat-card-content> <mat-divider></mat-divider> <mat-card-footer> <div class="page-footer"> <mat-icon>whatshot</mat-icon> </div> </mat-card-footer> </mat-card> 

Значения, введенные на панели инструментов Butter, сразу обновят содержимое нашего приложения.

Ведение блога

Для отображения сообщений мы создаем простой маршрут /blog в вашем приложении и извлекаем сообщения из блога из API-интерфейса Butter, а также маршрут /blog/:slug для обработки отдельных сообщений.

Смотрите нашу ссылку API для дополнительных опций, таких как фильтрация по категории или автору. Ответ также включает некоторые метаданные, которые мы будем использовать для нумерации страниц.

Настройте домашнюю страницу блога

Под apps/blog-post введите ng g component listing .

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

Обновите компонент, чтобы получить все сообщения:

1. импорт butterService
2. получить все сообщения на сайте

 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; }); } } 

Показать результат:

 <mat-card> <mat-card-title class="page-title">Blog Posts</mat-card-title> <mat-divider></mat-divider> <mat-card-content class="page-body"> <mat-card *ngFor="let post of posts"> <mat-card-title> <a [routerLink]="[post.slug]"> <div class="container"> <div fxLayout="row" fxLayout.xs="column" fxFlex class="content"> <div class="blocks"> <img *ngIf="post.featured_image" src="{{post.featured_image}}" height="64" width="64"/> </div> <div class="blocks"> {{post.title}} </div> </div> </div> <div class="container"> <div fxLayout="column" class="summary"> <div [innerHTML]="post.summary"></div> </div> </div> </a> </mat-card-title> </mat-card> </mat-card-content> <mat-divider></mat-divider> <mat-card-footer> <div class="page-footer"> <mat-icon>whatshot</mat-icon> </div> </mat-card-footer> </mat-card> 

Настройка страницы блога

Под apps/blog-post введите ng g component details .

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

Чтобы показать один пост:

1. Импортное butterService
2. В хуке OnInit используйте butterService чтобы получить сообщение в блоге с указанным слагом в пути URL
3. Сохраните результаты в переменной post, и разметка (HTML) будет обновлена ​​с данными клиента.

 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<string>; 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); }); }); } } 

Показать результат:

 <mat-card> <div class="container"> <div fxLayout="column" class="blog-details"> <div class="container"> <div fxLayout="row"> <h1 class="blocks"> {{post.data.title}} </h1> <div *ngIf="post.meta.previous_post"><a [routerLink]="post.meta.previous_post"><</a></div> <div *ngIf="post.meta.next_post"><a [routerLink]="post.meta.next_post">></a></div> </div> <h4> {{post.data.author.first_name}} {{post.data.author.last_name}} </h4> <div class="post-body" [innerHTML]="post.data.body"></div> </div> </div> </div> </mat-card> 

Теперь у вашего приложения есть рабочий блог, который можно легко обновить на панели управления ButterCMS.

Категории, теги и авторы

Используйте API-интерфейсы Butter для категорий, тегов и авторов, чтобы добавлять и фильтровать контент в своем блоге.

Список всех категорий и получать сообщения по категориям

Вызовите эти методы на onInit() жизненного цикла onInit() :

 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() } 

Завершение

Congrats! Вы успешно превратили свое статическое приложение Angular в приложение на базе CMS с использованием API контента, тем самым поддерживая безсерверную архитектуру. Ваша команда разработчиков может воспользоваться аспектами Angular, позволяющими сэкономить время, а вы сэкономили еще больше времени благодаря использованию CMS без сервера.