Angular 2 services — Службы

Angular 2 services — Службы

От автора: службы применяются, когда нам нужно использовать общий функционал для разных модулей. Например, у нас может быть функционал базы данных, который используется различными модулями. И, следовательно, вы можете создать службу, которая будет содержать функционал базы данных. Разберем на примере работу Angular services.

Angular 2 services — Службы

При создании службы необходимо выполнить следующие действия.

Шаг 1 — Создайте отдельный класс, который содержит включаемый декоратор. Включаемый декоратор позволяет вводить и использовать функционал этого класса в любом модуле Angular JS.

@Injectable() 
  export class classname { 
} 

Шаг 2 — Далее в модуле appComponent или модуле, в котором вы хотите использовать службу, вам необходимо определить его в качестве провайдера в декораторе @Component.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
@Component ({ 
  providers : [classname] 
})

Давайте рассмотрим пример того, как это делается.

Шаг 1. Создайте файл ts для службы с именем app.service.ts.

Angular 2 services — Службы

Шаг 2 — Поместите следующий код в созданный выше файл.

import { 
  Injectable 
} from '@angular/core'; 
 
@Injectable()
export class appService { 
  getApp(): string { 
 return "Hello world"; 
  } 
}

В вышеуказанном коде необходимо отметить следующее.

Декоратор Injectable импортируется из модуля angular/core.

Мы создаем класс с именем appService, который оформляется декоратором Injectable.

Мы создаем простую функцию с именем getApp, которая возвращает строку «Hello world».

Шаг 3 — Поместите следующий код в файл app.component.ts.

import { 
  Component 
} from '@angular/core'; 
 
import { 
  appService 
} from './app.service'; 
 
@Component ({ 
  selector: 'demo-app', 
  template: '<div>{{value}}</div>', 
  providers: [appService] 
}) 
 
export class AppComponent { 
  value: string = ""; 
  constructor(private _appService: appService) { } 
 
  ngOnInit(): void { 
 this.value = this._appService.getApp(); 
  } 
}

В вышеуказанном коде необходимо отметить следующее.

Во-первых, мы импортируем модуль appService в модуль appComponent.

Затем мы регистрируем службу, в качестве провайдера в этом модуле.

В конструкторе мы определяем переменную с именем _appService типа appService, чтобы ее можно было вызывать где угодно в модуле appComponent.

Например, в хуке ngOnInit мы вызываем функцию getApp службы и присваиваем результат свойству value класса AppComponent.

После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.

Angular 2 services — Службы

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree