Angular Service in Aurelia?

Question

I have yet to find decent documentation that details the transition from Angular 1.x to Aurelia. So far I have only seen people describe in detail how the concept of Angular directive can be redone in Aurelia using @customElement . Good, simple enough. But these examples are always, always just mocking the data.

However, Angular Services are singletones that can be entered into any controller / directive / service and usually allow you to receive data from the server (i.e. PersonService , OrdersService ).

But how are these data services modeled in Aurelia? Is this all class? It looks like him .

Essentially, I would see some sample code, hello-world , which efficiently extracts data from a service and provides it with @customElement . Where do the HTTP calls go? How do we even make HTTP calls? Angular uses $http , what about Aurelia?

EDIT :

Here is a simple Angular service. How can this be attacked in Aurelia?

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

Answer 1

Yep-plain ES6 / ES7 classes. There is no infrastructure interference in your data services.

my-data 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); } } 

fancy customs-element.js

 import {MyDataService} from './my-data-service'; import {inject} from 'aurelia-framework'; @inject(MyDataService) // aurelia 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); } }