如何在 AngularJS 1.5+ 中使用 $http 创建 Service/Factory？ (ES6)

Question

我在 angular.js 1.5 中使用这个 boilerplate，我没有使用新的 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;

Answer 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;

如何在 AngularJS 1.5+ 中使用 $http 创建 Service/Factory？ (ES6)

How to make a Service/Factory with $http in AngularJS 1.5+? (ES6)

angularjs

ecmascript-6

angularjs-service

angularjs-components