Как создать простую веб-сайт компании с космическими JS и угловой

Автор оригинала: Diego Perez.

* Эта статья будет принимать какие-то базовые знания о угловании, чтобы он мог сосредоточиться на конкретной задаче запроса и отображения данных из Cosmic JS

TL; Доктор

Посмотрите на репозиторий и Установите приложение

О чем это приложение?

Типичный веб-сайт компании – это просто набор страниц, структурированных в более или менее простой навигации. Мы хотим создать веб-сайт, который позволяет пользователю создавать любое количество страниц и решить структуру для навигации, без необходимости дождаться выпуска кода. Для этого мы собираемся полагаться на Cosmic JS и создаем структуру, чтобы держать этот проект. На этом примере наше ведро будет иметь следующие типы объектов:

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

Используя API

Теперь, когда мы определили структуру наших данных, нам нужно создать наше угловое приложение (я рекомендую использовать угловую CLI) и создать службу, чтобы сделать наши звонки в Cosmic JS API. Посмотрите, насколько просто запрашивать объект одной страницы из Cosmic JS:

getPage(slug: string): Observable {
    if (!this.page$.get(slug)) {
      const url = `api.cosmicjs.com/v1/company-presentation/object/${slug}`;
      const response = this.http.get(url).pipe(
        tap(_ => console.log(`fetched page: ${slug}`)),
        map(_ => {
          return new Page(_['object']);
        }),
        shareReplay(1),
        catchError(this.handleError(`getPage: ${slug}`))
      );
      this.page$.set(slug, response);
    }
    return this.page$.get(slug);
  }

Получите одну страницу и сохраните его к потоку, чтобы держать его кэшированным для сеанса

Обратите внимание, что для вложенных объектов Cosmic JS не вернет полное дерево, поэтому иногда вам нужно будет объединить звонки, чтобы максимально использовать наш сервис, например, привлечь основные пресеты, вы, вероятно, захотите включить навигационные страницы.

getMainPresets(includeNavigation?: boolean): Observable
 {
    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);
    }
  }

Этот вызов будет сочетать результат getnavigate в результате getpreset

Наши вызовы API должны быть аутентифицированы с помощью клавиши чтения, мы можем включить, что на каждый метод, но самое простое может быть создать перехватчик. Это перехватит все запросы HTTP-запросов, поэтому мы проверяем, является ли это Cosmic JS-запрос и добавить ключ чтения, где это необходимо.

intercept(req: HttpRequest, next: HttpHandler): Observable> {
    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 для загрузки компонента страницы. А что происходит, когда нет указанного маршрута? Это будет наш самый распространенный сценарий, для этого мы установили пустой маршрут с охраной.

const routes: Routes = [
  {
    path: '',
    canActivate: [HomepageGuard]
  },
  {
    path: ':slug',
    component: PageComponent
  }
];

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

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.cosmicService.getMainPresets().pipe(
      map(presets => {
        return this.router.parseUrl(`/${presets.homepage.slug}`);
      })
    );
  }

от угловых 7.1, канактивировать может вернуть либо логическое или урлтри

Составные части

Теперь у нас есть конфигурация маршрута, которая загрузит компонент страницы, и это способ загрузки страницы, используя 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» в качестве параметра на метод

Все это позволит вам быстро создать веб-сайт, использующий угловые и космические JS, все, что осталось сделать, это создать шаблоны и расширить конфигурацию для удовлетворения ваших потребностей.