如何在 AngularJS 1.5+ 中使用 $http 创建服务/工厂？ (ES6)答案

【问题标题】：How to make a Service/Factory with $http in AngularJS 1.5+? (ES6)如何在 AngularJS 1.5+ 中使用 $http 创建服务/工厂？ (ES6)
【发布时间】：2017-12-05 06:43:32
【问题描述】：

我将这个 boilerplate 用于 angular.js 1.5，我没有使用新的 angularjs sintax，并且不知道如何使用和注入 $http 用于 http 请求。

过去我会使用旧的 angularjs 服务 (MyService) 并在其中注入 $http 然后我会在我的控制器中调用 MyService.getData()，但是使用这种新语法我迷失了如何创建服务并在其中注入 $http，然后在组件中使用该服务。

这就是模块文件 questions.js 的样子：

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;

questions.component.js:

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

export default questionsComponent;

最后是questions.controller.js：

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

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

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

export default QuestionsController;

【问题讨论】：

标签： angularjs ecmascript-6 angularjs-service angularjs-components

【解决方案1】：

好的，终于成功了：

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;

在控制器中：

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;

在模块中：

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

export default questionsModule;

【讨论】：