angular:angular2:services:servisy_i_dependency_injection []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
=====Сервисы и dependency injection Сервисы=====
Сервисы в Angular представляют довольно широкий спектр классов, которые выполняют некоторые специфические задачи, например, логгирование, работу с данными и т.д.\\
\\
В отличие от компонентов и директив сервисы не работают с представлениями, то есть с разметкой html, не оказывают на нее прямого влияния. Они выполняют строго определенную и достаточно узкую задачу.\\
\\
Стандартные задачи сервисов:\\

  * Предоставление данных приложению. Сервис может сам хранить данные в памяти, либо для получения данных может обращаться к какому-нибудь источнику данных, например, к серверу.
  * Сервис может представлять канал взаимодействия между отдельными компонентами приложения
  * Сервис может инкапсулировать бизнес-логику, различные вычислительные задачи, задачи по логгированию, которые лучше выносить из компонентов. Тем самым код компонентов будет сосредоточен непосредственно на работе с представлением. Кроме того, тем самым мы также можем решить проблему повторения кода, если нам потребуется выполнить одну и ту же задачу в разных компонентах и классах

Допустим, у нас есть следующая базовая структура проекта:\\
\\
{{:angular:angular2:services:4.5.png|}}
\\
Добавим в папку %%src/app%% новый файл **data.service.ts**. Этот файл будет содержать код сервиса. Согласно условностям в названии файла после названия самого сервиса должна идти подстрока .service. Если название сервиса состоит из нескольких слов, которые начинаются с большой буквы, то в названии файла все эти слова пишутся с маленькой буквы и разделяются дефисами. Например, если сервис называется ''SpecialSuperHeroService'', то файл сервиса будет называться ''special-super-hero.service.ts''.\\
\\
Определим в этом файле следующий сервис:
<code javascript>
export class DataService{
  
    private data: string[] = [ "Apple iPhone XR", "Samsung Galaxy S9",  "Nokia 9"];
      
    getData(): string[] {
          
        return this.data;
    }
    addData(name: string){
          
        this.data.push(name);
    }
}
</code>
В сервисе определен массив данных и методы для работы с ним. В реальном приложении эти данные можно получать с сервера или из какого-либо внешнего хранилища.\\
\\
Теперь определим код компонента:
<code javascript>
import { Component} from '@angular/core';
import {DataService} from './data.service';
        
@Component({
    selector: 'my-app',
    template: `<div class="panel">
        <div><input [(ngModel)]="name" placeholder = "Модель" />
            <button (click)="addItem(name)">Добавить</button>
        </div>
        <table>
            <tr *ngFor="let item of items">
                <td>{{item}}</td>
            </tr>
        </table>
    </div>`,
    providers: [DataService]
})
export class AppComponent{ 
      
    items: string[] = [];
    name: string;
    constructor(private dataService: DataService){}
      
    addItem(name: string){
          
        this.dataService.addData(name);
    }
    ngOnInit(){
        this.items = this.dataService.getData();
    }
}
</code>
Чтобы задействовать сервис в компоненте, его не только надо импортировать:
<code javascript>
import {DataService} from './data.service';
</code>
Но также необходимо его добавить в коллекцию providers компонента:

<code javascript>
providers: [DataService]
</code>


Все используемые сервисы добавляются в коллекцию providers. Тем самым определяется провайдер сервиса, который будет использоваться для его получения. И после этого мы сможем задействовать встроенный в Angular механизм dependency injection и получить объект сервиса в конструкторе компонента и затем использовать по необходимости:

<code javascript>
constructor(private dataService: DataService){}
</code>

Для загрузки данных реализуется метод ''ngOnInit()'' интерфейса OnInit, который вызывается после конструктора.\\
\\
И так как мы используем директиву ngModel для работы с элементами формы, то нам надо подключить модуль FormsModule в файле app.module.ts:

<code javascript>
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }   from './app.component';
  
@NgModule({
    imports:      [ BrowserModule, FormsModule],
    declarations: [ AppComponent],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }
</code>
В итоге мы сможем и выводить данные и добавлять новые элементы через сервис:\\
\\
{{ :angular:angular2:services:4.1.png |}}
Инструменты пользователя

Инструменты сайта

Инструменты страницы
