Сегодня я хочу говорить о функции, которая, я думаю, может иметь большое значение в ближайшем будущем, что одата. И создать обсуждение, я буду употреблять службы ODATA с ой так популярные технологии в наше время (а которые я лично обожаю) угловые 2.
Вступление
Как указано в официальном одатах Сайт :
«Odata (Protocol data protocol) – это стандарт OASIS, который определяет набор лучших практик для строительства и потребления спокойных API. Odata поможет вам сосредоточиться на вашей бизнес-логике во время создания реставращих API без необходимости беспокоиться о различных подходах к определению запроса и ответа. Заголовки, коды состояния, HTTP-методы, конвенции URL, типы носителей, форматы полезной нагрузки, параметры запросов и т. Д… »
Теперь давайте посмотрим на то, что Odata с точки зрения перспективы клиента (приложение, которое собирается потреблять эту услугу, и может быть сервером или браузером). Для клиента стандарты Odata позволяют иметь доступ к действительно спокойным услугам, но и в предсказуемом и стандартном способе. Таким образом, нет более грязных и пользовательских УРИ, где клиент должен знать, как реализуется услуга, прежде чем иметь возможность подключаться к нему, но он может использовать вызовы со стандартными и быть уверены, что он собирается получить правильные ответы для всех запросов (мы можем сказать, что Ответы предсказуются).
Odata – это просто обычный веб-сервис, который доступа к HTTP. И учитывая, что то нам не понадобится создать ничего особенного, но просто простой набор методов, которые будут выполнять HTTP-запросы, в этом руководстве я покажу вам удобный и масштабируемый способ создать клиента для угловых 2, которые будут потреблять одата веб-сервис.
Начиная
Итак, начать, я буду использовать следующие инструменты (вы можете использовать инструменты по вашему выбору):
- Визуальный студийный код, как интегрированная среда разработки;
- Angular2 Seed Project, как шаблон для начала;
- Node.js, NPM, чтобы сделать нашу жизнь проще;
Сначала пойдем на следующий репо GitTub и загрузите наш шаблон проекта: https://github.com/angulour/angular2-seed Отказ
Затем вам нужно открыть этот проект в локальной среде и запустить команду ниже из корневой папки проекта.
npm install
Затем код ниже будет загружать все узловые модули, необходимые для работы с нашим проектом. Обратите внимание, что именно этот шаг работать правильно, у вас должен быть Node.js и NPM на вашем компьютере.
cd angular2-seed
Теперь, если вы запустите NPM начать Команда локальный сервер будет запущен, и вы сможете увидеть результат в браузере. URL по умолчанию – http://localhost: 3000 , и если сейчас все идет хорошо, вы должны увидеть эту домашнюю страницу в вашем браузере:
Теперь пойдем в приложение SRC -> и создайте дополнительные папки, которые будут иметь компонент для наших тестов с запросами ODATA. Я назову эту папку Odata.
Внутри этой папки я собираюсь создавать 4 файла:
odata.component.ts– что будет нашим компонентом для взаимодействия с данными;odata.component.html– шаблон для нашего компонента;odata.service.html– Сервис, который поддержит нас в вызове веб-сервисов Odata;odata.model.ts– файл для хранения наших enums, классов, интерфейсов и значений для структуры
Конечный результат должен выглядеть так:
Выполнение
Теперь давайте погрузимся к реализации. Поместите следующий код в компонент:
import { Component, OnInit } from '@angular/core';
import { ODataService } from './odata.service';
import { RequestTypes } from './odata.model';
import { IUrlOptions } from './odata.model';
@Component({
selector: 'odata',
templateUrl: 'odata.component.html'
})
export class ODataComponent implements OnInit {
public requestResult: any;
constructor(
private odata: ODataService
) { }
ngOnInit() { }
testGet() {
let urlOptions: IUrlOptions = {};
urlOptions.restOfUrl = "Products?$format=json";
this.odata.Request(RequestTypes.get, urlOptions).subscribe(
data => this.requestResult = data,
error => alert(error)
);
}
testPost() {
let urlOptions: IUrlOptions = {};
this.odata.Request(RequestTypes.post, urlOptions).subscribe(
data => this.requestResult = data,
error => alert(error)
);
}
testPut() {
let urlOptions: IUrlOptions = {};
this.odata.Request(RequestTypes.put, urlOptions).subscribe(
data => this.requestResult = data,
error => alert(error)
);
}
testPatch() {
let urlOptions: IUrlOptions = {};
this.odata.Request(RequestTypes.patch, urlOptions).subscribe(
data => this.requestResult = data,
error => alert(error)
);
}
testDelete() {
let urlOptions: IUrlOptions = {};
this.requestResult = this.odata.Request(RequestTypes.delete, urlOptions);
}
}
Это простой компонент, в котором мы ссылаемся на наш шаблон, введите экземпляр нашего сервиса и создаете методы, которые мы будем связываться с кнопками на нашем шаблоне для проверки действия. Кроме того, это содержит объект, который содержит ответ из веб-службы в формате JSON, который мы собираемся отображать в шаблоне.
В шаблоне компонента поставьте следующий код:
Welcome to OData Component
Request results will be displayed here
{{requestResult | json}}
Как описано ранее, шаблон будет иметь несколько кнопок для выполнения различных запросов и разделов тестовых тестов для отображения результата запросов.
Теперь давайте посмотрим на саму сервис. Пожалуйста, скопируйте-вставьте следующий код в файл сервиса:
import { Injectable } from '@angular/core';
import { Http, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs';
import { IUrlOptions } from './odata.model';
import { RequestTypes } from './odata.model';
@Injectable()
export class ODataService {
constructor(
private host: string,
private http: Http
) { }
private constructUrl(urlOptions: IUrlOptions): string {
return this.host + urlOptions.restOfUrl;
}
//T specifies a generic output of function
public Request(requestType: RequestTypes, urlOptions: IUrlOptions, body?: any, options?: RequestOptionsArgs) : Observable {
let response: Observable;
//True in case of post, put and patch
if (body && options) {
response = this.http[RequestTypes[requestType]](
this.constructUrl(urlOptions),
body,
options);
}
//True in case of post, put and patch if options is empty
else if (body) {
response = this.http[RequestTypes[requestType]](
this.constructUrl(urlOptions),
body);
}
//True in case of get, delete, head and options
else if (options) {
response = this.http[RequestTypes[requestType]](
this.constructUrl(urlOptions),
options);
}
//True in case of get, delete, head and options, if options is empty
else {
response = this.http[RequestTypes[requestType]](
this.constructUrl(urlOptions),
options);
}
return response.map((res) => res.json());
}
}
Первое, что вы заметите здесь, так это то, что в нашем конструкторе мы ввели хост, который мы пройдем через пользовательский поставщик (мы создадим это в данный момент).
Поскольку Odata состоит из трех частей, которые являются:
- Сервисный корневой URL
- Путь ресурсов
- Варианты запроса
И поскольку мы знаем, что URL-адрес корневого обслуживания всегда будет одинаковым, мы можем ввести его в зависимость от нашего сервиса (частный хост: строка) и в основном сосредоточиться на построении пути ресурса и работая с опциями запроса.
Вторая важная вещь, чтобы заметить здесь, – это метод запроса. В модуле HTTP-модуля Angular 2 у нас есть разные типы запросов (Get, Post, Put, Options, Delete, etc …), и все они практически идентичны, и единственное, что может измениться, это варианты тела и запроса. Итак, именно поэтому я предпочитаю иметь только один метод, другой причина иметь только один метод, в том, что с ODATA нам не нужно делать какие-либо дополнительные манипуляции, прежде чем делать запрос, потому что все манипуляции необходимо выполнить на URL-адресе запроса Отказ
Для этой цели я создал метод под названием Конструктор , который несет ответственность за создание правильного URL-адреса (я сделал это очень просто, чтобы продемонстрировать вам свою идею, но его можно расширить общедоступным способом, просто добавив новые свойства для Urloptions и использовать их Внутри Constructurl Функция).
Модель файла выглядит так:
export enum RequestTypes {
get,
post,
put,
delete,
patch,
head,
options
}
export interface IUrlOptions {
restOfUrl: string,
}
Теперь давайте создадим еще один дополнительный файл для удержания нашего пользовательского поставщика для ОДАТАСЕРВИКОВ класс. Я назову это Odata.serviceProvider.ts Отказ Пожалуйста, поместите следующий код в этот файл:
import { Http } from '@angular/http';
import { ODataService } from './odata.service';
export function provideODataService(url: string) {
return {
provide: ODataService, useFactory: (http) => {
return new ODataService(url, http);
},
deps: [Http]
}
}
Это способ, которым мы должны ввести пользовательские ценности в наш сервис во время создания его. Таким образом, что произойдет вот то, что, когда мы сначала запросите наш сервис, он будет создан. Во время создания вместо того, чтобы использовать конструктор по умолчанию, он будет использовать завод, где мы собираемся ввести нашу собственную стоимость для свойства Host.
Теперь перейдите в файл app.module.ts и добавьте: Одакакомпонент В список объявлений и следующей линейке кода к списку поставщиков:
provideODataService("http://services.odata.org/V3/(S(pq1lpmgz0kuok05ubqtx1c2g))/OData/OData.svc/")
Обратите внимание, что перед добавлением этих строк кода вы должны импортировать ссылки на Одакакомпонент и ПредостататаСервис Отказ
Информация: В этом руководстве я буду использовать тестовые услуги, предоставляемые www.odata.org: http://services.odata.org/V3/(S(pq1lpmgz0kuok05ubqtx1c2g))/OData/OData.svc/
Теперь нам нужно добавить путь к нашему определению маршрутизации, чтобы иметь возможность добраться до компонента и отправлять запросы на веб-услуги. Для этого перейдите к App.Routes.ts и добавьте следующую строку кода на массив маршрутов:
{ path: 'odata', component: ODataComponent }
(Опять же: не забудьте импортировать Odatacomponent ранее).
Что это, работала!
Теперь ударил NPM начать В вашей командной строке, чтобы позволить всем снова перекомпилировать. Перейти к http://localhost: 3000/#/Odata URL-адрес и нажмите кнопку получения запроса, а в нижней части страницы вы должны увидеть ответ из веб-службы ODATA.
Заключение
В этом руководстве я только показал, как работать с запросами Get, но другие виды запроса будут работать очень похожими. Итак, я полагаю, что в этот момент у вас есть хорошие стартовые (и слабительные) точки, чтобы начать работать с веб-сервисами Odata в вашем угловом приложении.
Большое спасибо за ваше время, и если у вас есть какие-либо вопросы о Odata или Angulary 2, вы можете добраться до меня здесь в Computedor или опубликуйте свой отзыв на раздел «Комментарий» ниже.