Следуйте этим простым шагам, чтобы создать полнофункциональный веб-сайт, используя Angular.
Как создать полностраничный веб-сайт в Angular. Часть 1 (4)
Как создать полностраничный веб-сайт в Angular. Часть 2 (4)
Как создать полностраничный веб-сайт в Angular. Часть 3 (4)
Как создать полностраничный веб-сайт в Angular. Часть 4 (4)
05. Генерируем content service
В продакшене наш контент, скорее всего, тянется из базы данных, но ради этой статьи мы изолируем наш контент в service.
Как и с нашим page component, мы можем использовать CLI для создания нашей контент службы. Мы создадим каталог shared, затем подкаталог services, а затем с помощью ng g создадим наш сервис.
|
1 2 3 |
mkdir src/app/shared mkdir src/app/shared/services ng g service shared/services/content |
В отличие от компонентов, CLI не добавляет сервисы к нашему Angular модулю автоматически, поэтому нам нужно добавить его в массив providers наших метаданных вручную.
|
1 2 3 4 5 6 7 8 9 10 |
// app/app.module.ts import { ContentService } from './shared/services/content.service'; @NgModule({ declarations: [...], imports: [...], providers: [ContentService], bootstrap: [AppComponent] }) |
06. Билдим content service
CLI сгенерирует базовую заготовку, которую мы можем использовать для добавления контента на наших страницах.
|
1 2 3 4 5 6 7 |
ts import { Injectable } from '@angular/core'; @Injectable() export class ContentService { constructor() { } } |
Мы собираемся создать объект pages с ключом для каждой страницы, которую мы хотим создать, и значением, представляющим содержание страницы. Это будет похоже на начальный объект page, который мы создали в нашем page component.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// app/shared/services/content.service.ts import { Injectable } from '@angular/core'; @Injectable() export class ContentService { pages: Object = { 'home': {title: 'Home', subtitle: 'Welcome Home!', content: 'Some home content.', image: 'assets/bg00.jpg'}, 'about': {title: 'About', subtitle: 'About Us', content: 'Some content about us.', image: 'assets/bg01.jpg'}, 'contact': {title: 'Contact', subtitle: 'Contact Us', content: 'How to contact us.', image: 'assets/bg02.jpg'} }; } |
Затем мы можем вывести наш контент из ContentService, указав объект pages соответствующим ключом. В этом случае мы жестко хардкодим ключ к home, но через мгновение мы сделаем его динамичным.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// app/page/page.component.ts import { Component, OnInit } from '@angular/core'; import { ContentService } from '../shared/services/content.service'; @Component({ selector: 'app-page', templateUrl: './page.component.html', styleUrls: ['./page.component.css'] }) export class PageComponent implements OnInit { page: Object; constructor(private contentService: ContentService) { } ngOnInit() { this.page = this.contentService.pages['home']; } } |
Лучшей практикой считается использовать логику инициализации вне конструктора, поскольку код трудно проверить, а иногда данные недоступны сразу же, когда они поступают из родительского компонента. Лучшее место для логики инициализации — это метод ngOnInit, который запускается после инициализации привязок (bindings) компонента.
Источник creativebloq.com
