Что такое Angular Service | Пример службы Angular 9

Сервисы — это не конструкция Angular, а скорее шаблон. Angular Services — это не что иное, как класс для инкапсуляции некоторой логики, которую вы хотите использовать в разных местах вашего приложения. В этом примере мы используем Angular 9. Компоненты не должны получать или хранить данные напрямую, и они действительно не должны сознательно предоставлять поддельные данные.

Их основное внимание должно быть направлено на представление данных и делегирование доступа к данным службе.

Если вы новичок в Angular, то, пожалуйста, ознакомьтесь с моими этими руководствами.

  1. Угловой маршрутизатор

  2. Угловая форма Проверка

  3. Angular Dependency Injection

Что такое Angular Service

Angular Service — это обычно класс с четко определенной целью. Он должен быть конкретным и делать это хорошо. Angular отличает компоненты от сервисов.

Сервисы в Angular очень полезны для обмена информацией между классами, которые Не знакомы. Когда мы разрабатываем приложение Angular, мы, скорее всего, натолкнемся на схему, в которой нам нужно использовать один и тот же код для нескольких компонентов angular. В этом случае Services помогут нам избавиться от этой проблемы.

Мы можем использовать код сервисов среди различных компонентов angular.

С зависимостью Angular инъекции, вы можете внедрить службы вокруг своего приложения. Чтобы создать класс обслуживания, вам не нужно делать ничего специфичного для Angular.

Метаданные не требуются. Не требуется какое-то соглашение об именах или какой-либо функциональный интерфейс, который необходимо реализовать. Это просто классы, которые вы создадите для модуляции повторно используемого кода.

Почему мы используем Angular Service

Их много причины, по которым вы хотели бы создавать и использовать службы в своих приложениях Angular. Одна из самых распространенных — это служба передачи данных. Класс, который будет обрабатывать получение и настройку данных из вашего хранилища данных.

Служба данных, которая внедряется в каждый из этих компонентов, позволяет вам не воссоздавать один и тот же код подключения к хранилищу данных в каждом компоненте. Другое распространенное использование службы — это некоторая бизнес-логика.

В структуре Angular есть классы, которые обязательно являются классами обслуживания. Такие вещи, как Http , FormBuilder и другие, содержат логику для выполнения определенных действий, не связанных с компонентами. И снова, с помощью механизма внедрения зависимостей вы можете отправлять эти сервисы в конструкторы классов и использовать их.

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

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

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

Мы не должны нарушать общие принципы программирования, такие как Single Responsibility of Class .

В этом случае Компоненты используются для отображения и представления данных. Службы используются для получения данных из API. Давайте начнем наш пример службы Angular 9.

Шаг 1. Установите Angular через интерфейс командной строки.

Вам необходимо настроить среду разработки, прежде чем вы сможете что-либо делать.

Установите Node.js® и npm , если их еще нет на вашем компьютере.

Затем установите Angular CLI глобально.
 npm install  -g @ angular/cli 

Шаг 2. Создайте новый проект.

Введите следующую команду.

 ng new ngservices 

Шаг 3. Выполните обслуживание приложения.

Перейдите в папку проекта и запустите server.

 cd my-appng serve --open 

Шаг 4. Создайте класс обслуживания.

Чтобы создать класс обслуживания angular, в консоли введите следующую команду в корне папки.

 ng g service crypto 

Это будет создайте следующие файлы.

  1. crypto.service.ts ong>
  2. crypto.service.spec.ts

Теперь импортируйте файл службы в app.module.ts .

 import {CryptoService} from './crypto.service'; @ NgModule ({Providers: [CryptoService],}) 

Теперь нам нужно добавить код в файл crypto.service.ts . Этот файл содержит данные, которые нам нужно потреблять. Итак, это служебный файл. В проекте Live этот файл отправляет запрос GET или POST на сервер и вставляет или извлекает данные. Таким образом, этот файл предоставляет услуги от внешнего интерфейса до внутреннего.

//items.service.tsimport {Injectable} from '@ angular/core'; @ Injectable () экспортный класс CryptoService {Coins = [{id  : 1, имя: 'BTC'}, {id: 2, имя: 'XRP'}];  constructor () {} getMyItems () {вернуть this.coins;  }} 

Шаг 5. Используйте службы в компоненте.

Итак, ваш app.component.ts файл выглядит так.

//app.component.tsimport {Component} from '@ angular/core'; import {CryptoService} from './crypto. service '; @ Component ({селектор:' app-root ', templateUrl:' ./app.component.html ', styleUrls: [' ./app.component.css']]} )export class AppComponent {Coins = []  ;  конструктор (частный криптосервис: CryptoService) {this.coins = cryptoservice.getMyItems ();  }} 

Также нам нужно обновить HTML.

 
ID Name
{{coin.id}} {{coin.name}}

Наконец, вы можете увидеть в браузере:

Вы можете см. данные в формате таблицы.

В реальном сценарии данные извлекаются из Backend API. В этом случае мы взяли простой статический массив.

Глобальная служба против внедрения локальной службы в Angular

Чтобы внедрить службы, у вас есть два варианта.

#Inject as ‘global service’.

Чтобы ввести как глобальный service, добавьте службу в корневой модуль .

Вам необходимо зарегистрировать модуль внутри app.module.ts файл, как мы сделали ранее в этом посте.

 import {CryptoService} from './crypto.service';  @NgModule ({провайдеры: [CryptoService],}) 

2) Ввести как «локальную службу»

Чтобы внедрить как локальная служба, вставьте службу в компонент напрямую.

См. следующий код внутри файла app.component.ts .

 import {Component} from '@ angular/core'; import {CryptoService} from './service/crypto.service';  @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], provider: [CryptoService]}) экспортный класс AppComponent {title  = 'приложение';  constructor (calc: CalcService) {//Use calc}} 

Итак, мы можем зарегистрировать службу в Angular, локально или глобально.

Если вы используете services для более чем одного компонента, то вы должны определить один глобальный, иначе local будет работать нормально. Это зависит от размера проекта.

Наконец, наше Учебное пособие по использованию сервисов Angular 9 закончено.

Похожие сообщения

Angular 9 CRUD

Angular HttpClient

Пример загрузки файла Angular

Оцените статью
nanomode.ru
Добавить комментарий