ऑरेलिया में कोणीय सेवा?

Question

मुझे अभी तक सभ्य दस्तावेज नहीं मिला है कि कैसे कोणीय 1.x से ऑरेलिया में माइग्रेट करना है। अब तक, मैंने केवल लोगों को यह देखा है कि एंगुलर directive की अवधारणा को @customElement का उपयोग करके ऑरेलिया में रीमेड किया जा सकता है। ठीक है, काफी सरल है। लेकिन इन उदाहरणों हमेशा, हमेशा नकली डेटा।

जिसके अनुसार, कोणीय सेवाएं एकमात्र है कि किसी भी नियंत्रक/निर्देश/सेवा में इंजेक्ट किया जा सकता है, और आम तौर पर एक सर्वर से डेटा फ़ेच लिए अनुमति देता है (अर्थात PersonService, OrdersService)।

लेकिन ये data services ऑरेलिया में मॉडलिंग कैसे हैं? क्या सब कुछ सिर्फ एक वर्ग है? यह seems like it है।

अनिवार्य रूप से, मुझे कुछ कोड नमूने, hello-world देखना होगा, जो प्रभावी रूप से किसी सेवा से डेटा प्राप्त करता है, और इसे @customElement पर प्रदान करता है। HTTP कॉल कहां जाते हैं? हम HTTP कॉल कैसे करते हैं? कोणीय $http का उपयोग करता है, ऑरेलिया के बारे में क्या?

संपादित:

यहाँ एक सरल कोणीय सेवा है। ऑरेलिया में इस पर हमला कैसे होगा?

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

Answer 1

हाँ-सादा 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); 
    } 
}