Comment créer un service/une fabrique avec $ http dans AngularJS 1.5+? (ES6)

Question

J'utilise ce boilerplate pour angular.js 1.5, je n'ai pas travaillé avec le nouveau angularjs sintax et je suis perdu de la façon d'utiliser et d'injecter $http pour la requête http. Dans le passé j'utilisais un ancien service angularjs (MyService) et à l'intérieur j'injecte $ http alors j'appelais dans mon contrôleur le MyService.getData(), mais avec cette nouvelle syntaxe je suis perdu comment créer un service et injecter dedans it $ http, puis utilisez ce service dans un composant.

Voici comment le fichier du module questions.js ressemble à:

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 
import questionsComponent from './questions.component'; 

    let questionsModule = angular.module('questions', [ 
     uiRouter 
    ]) 
    .component('questions', questionsComponent) 
    .name; 

    export default questionsModule; 

Le questions.component.js:

import template from './questions.html'; 
import controller from './questions.controller'; 
import './questions.scss'; 
let questionsComponent = { 
    bindings: {}, 
    template, 
    controller 
}; 

export default questionsComponent; 

Et enfin le questions.controller.js:

class QuestionsController { 
    constructor() { 
    this.name = 'questions'; 
    } 

    $onInit() { 
    console.log("$onInit") 
    } 

    $onDestroy() { 
    console.log("$onDestroy") 
    } 
} 

export default QuestionsController; 

Answer 1

Ok finalement obtenu ce travail :

import angular from 'angular'; 

class HttpService { 
    static $inject = ['$http','$q'] 

    constructor($http, $q) { 
    this.$http = $http; 
    this.$q = $q; 
    } 

    getResults() { 
    console.log("getResults()") 
    //return this.$http.get('/foo/bar/'); 
    this.$http.get("https://www.reddit.com/r/photoshopbattles/comments/6kl24d/psbattle_bat_carrying_baby.json") 
     .then(function(response) { 
     console.log("response", response) 
     }); 
    } 
} 


export default HttpService; 

Dans le contrôleur:

class QuestionsController { 
    static $inject = ['HttpService'] 

    constructor(HttpService) { 
    this.name = 'questions'; 
    this.service = HttpService; 
    } 

    $onInit() { 
    console.log("$onInit") 
    this.service.getResults(); 
    } 

    $onDestroy() { 
    console.log("$onDestroy") 
    } 
} 
export default QuestionsController; 

dans le module:

let questionsModule = angular.module('questions', [ 
    uiRouter, 
    User 
]) 
    .service('HttpService', HttpService) 
    .component('questions', questionsComponent) 
    .name; 

export default questionsModule;