Угловое обслуживание в Аурелии?

Question

Мне еще предстоит найти приличную документацию, в которой подробно описывается, как перейти от Angular 1.x к Aurelia. До сих пор я видел, как люди подробно описывают, как концепция Angular directive может быть переделана в Aurelia с использованием @customElement. Хорошо, достаточно просто. Но эти примеры всегда, всегда просто издеваются над данными.

Сказанное: Угловые услуги - это однотонные модули, которые могут быть введены в любой контроллер/директиву/услугу и, как правило, позволяют извлекать данные с сервера (то есть PersonService, OrdersService).

Но как эти data services моделируются в Аурелии? Все ли это класс? Это seems like it.

По сути, я бы увидел несколько примеров кода, hello-world, который эффективно извлекает данные из службы и предоставляет его @customElement. Где идут HTTP-вызовы? Как мы даже делаем HTTP-вызовы? Угловое использование $http, что относительно Aurelia?

EDIT:

Вот простой угловой сервис. Как можно было бы атаковать это в Аурелии?

app.service('SomeDataService', function() { 
    return { 
     getMyData: function (options) { 
      return $.ajax(options); 
     } 
    } 
}); 

Answer 1

Yep- простой ES6/ES7 классы. В ваших службах передачи данных нет вмешательства в инфраструктуру.

мой-данных-service.js

import {HttpClient} from 'aurelia-http-client'; // or 'aurelia-fetch-client' if you want to use fetch 
import {inject} from 'aurelia-framework'; 

@inject(HttpClient) 
export class MyDataService { 
    constructor(http) { 
    this.http = http; 
    } 

    getMyData() { 
    return this.http.get(someUrl); 
    } 
} 

фантазийных таможенно-element.js

import {MyDataService} from './my-data-service'; 
import {inject} from 'aurelia-framework'; 

@inject(MyDataService) // aurelia's dependency injection container will inject the same MyDataService instance into each instance of FancyCustomElement 
export class FancyCustomElement { 
    data = null; 

    constructor(dataService) { 
    this.dataService = dataService; 
    } 

    // perhaps a button click is bound to this method: 
    loadTheData() { 
    this.dataService.getMyData() 
     .then(data => this.data = data); 
    } 
}