Как создать простой веб-сайт компании с помощью Cosmic JS и Angular
* В этой статье предполагается наличие некоторых базовых знаний об Angular, чтобы можно было сосредоточиться на конкретной задаче запроса и отображения данных из Cosmic JS.
тл; ДР
Взгляни на хранилище а также установить приложение
О чем это приложение?
Типичный веб-сайт компании — это просто набор страниц, структурированных с более или менее простой навигацией. Мы хотим создать веб-сайт, который позволит пользователю создавать любое количество страниц и определять структуру навигации без необходимости ждать выпуска кода. Для этого мы будем полагаться на Cosmic JS и создадим структуру для реализации этого проекта. В этом примере наше ведро будет иметь следующие типы объектов:
- Страницы. Это простой объект без дополнительных метаполей.
- Навигация. Он будет содержать коллекцию страниц.
- Предустановки. Это объект конфигурации со списком атрибутов, которые помогут нам запустить наше приложение. Он будет содержать значение для домашней страницы и основной навигации, которую мы будем использовать для меню нашего сайта.
Использование API
Теперь, когда мы определили структуру наших данных, нам нужно создать наше приложение Angular (я рекомендую использовать Angular CLI) и создать службу для выполнения наших вызовов Cosmic JS API. Посмотрите, как просто запросить один объект страницы из Cosmic JS:
getPage(slug: string): Observable<Page> {
if (!this.page$.get(slug)) {
const url = `api.cosmicjs.com/v1/company-presentation/object/${slug}`;
const response = this.http.get<Page>(url).pipe(
tap(_ => console.log(`fetched page: ${slug}`)),
map(_ => {
return new Page(_['object']);
}),
shareReplay(1),
catchError(this.handleError<Page>(`getPage: ${slug}`))
);
this.page$.set(slug, response);
}
return this.page$.get(slug);
}
получить одну страницу и сохранить ее в потоке, чтобы сохранить ее в кэше для сеанса
Обратите внимание, что для вложенных объектов Cosmic JS не будет возвращать полное дерево, поэтому иногда вам потребуется объединять вызовы, чтобы максимально использовать наш сервис, например: при извлечении основных пресетов вы, вероятно, захотите включить страницы навигации.
getMainPresets(includeNavigation?: boolean): Observable<Preset> {
if (includeNavigation) {
return this.getPreset(environment.presets).pipe(
switchMap(response => {
return forkJoin([of(response), this.getNavigation(response.mainNavigation._id)]);
}),
map(res => {
res[0].mainNavigation = res[1];
return res[0];
})
);
} else {
return this.getPreset(environment.presets);
}
}
этот вызов объединит результат getNavigation с результатом getPreset
Наши вызовы API должны быть аутентифицированы с помощью ключа чтения, мы можем включить его в каждый метод, но проще всего создать перехватчик. Это перехватит все http-запросы, поэтому мы проверяем, является ли это запросом Cosmic JS, и при необходимости добавляем ключ чтения.
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.match(/api.cosmicjs/)) {
let params = new HttpParams({ fromString: req.params.toString() });
if (req.method === 'GET') {
params = params.append('read_key', environment.read_key);
} else {
params = params.append('write_key', environment.write_key);
}
req = req.clone({
params: params
});
}
return next.handle(req);
}
перехватывать и добавлять параметры чтения или записи
Маршрутизация на страницы
На данный момент наш веб-сайт ничего не делает, первое, что ему нужно сделать, это узнать, как загрузить свою первую страницу. Нам нужно создать маршрутизируемый модуль для страниц и настроить его для загрузки в корень. Оказавшись внутри модуля, на его собственной маршрутизации, мы установим маршрут для параметра :slug для загрузки компонента страницы. А что происходит, когда маршрут не указан? Это будет наш самый распространенный сценарий, для которого мы устанавливаем пустой маршрут с Guard.
const routes: Routes = [
{
path: '',
canActivate: [HomepageGuard]
},
{
path: ':slug',
component: PageComponent
}
];
Guard будет выполняться при сопоставлении маршрута и перед загрузкой компонента, поэтому мы будем использовать его для получения основных пресетов из Cosmic JS и перенаправления приложения на домашнюю страницу, которую мы установили.
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.cosmicService.getMainPresets().pipe(
map(presets => {
return this.router.parseUrl(`/${presets.homepage.slug}`);
})
);
}
из Angular 7.1 canActivate может возвращать либо логическое значение, либо UrlTree.
Составные части
Теперь у нас есть конфигурация маршрута, которая будет загружать компонент Page, и это способ загрузки страницы с использованием slug из списка параметров:
ngOnInit() {
this.route.paramMap
.pipe(
map(paramMap => paramMap.get('slug')),
switchMap(slug => (slug ? this.cosmicService.getPage(slug) : EMPTY))
)
.subscribe(page => (this.page = page));
}
теперь мы можем использовать объект страницы в нашем шаблоне
При этом у нас есть способ навигации по URL-адресу, но мы также должны загрузить меню, чтобы пользователь мог видеть доступные страницы. Для этого мы добавим компонент меню в основной модуль, так как он будет общим для всего приложения. Наше меню будет состоять из навигационного списка, логотипа и названия компании; все это определено в пресетах, поэтому меню будет иметь такой вызов:
ngOnInit() {
this.cosmicService.getMainPresets(true).subscribe(presets => {
this.logo = presets.companyLogoUrl;
this.navigation = presets.mainNavigation;
this.title = presets.companyName;
});
}
обратите внимание, что мы специально просим включить навигацию, добавив «true» в качестве параметра метода
Все это позволит вам быстро создать веб-сайт с использованием Angular и Cosmic JS, все, что осталось сделать, это создать шаблоны и расширить конфигурацию в соответствии с вашими потребностями.
