Question

我知道有类似的问题，但不知怎的，他们都有不同的代码，我似乎无法找到能够解答我特定问题的东西，对不起。

我跟随几个exmaples，我来到这里：

这是我即将成为的地图服务（maps.service.js）：

import angular from 'angular'
import angularConfig from '../angularConfig/angularConfig'

export default class Maps {
  initializeMap (element, options){
    return new Promise(function(resolve){
      return resolve(new google.maps.Map(document.getElementById(element), options))
    })
  }
}

Maps.$inject = ['$http']

angular.module(Maps, [])
  .service('maps.service', Maps)

你可以看到里面有一个方法的简单类。在底部基于几个例子我调用angular.service，给它一个名字并使用我创建的类。我认为这是错的，但我不知道为什么。我也不知道这是否正确的方式从角度注入我需要的服务。

然后，为了使用这个服务我有一个小控制器（catalog.controller.js）：

// import mapService from '../../common/maps/maps.service'

class catalogController {
  constructor($scope, mapsService) {
    this.$scope = $scope    
  }

  $onInit () {
    // map init

    mapService.initializeMap(param1, param2)
    .then(() => {
      console.log('it worked!!')
    })
  }
}

catalogController.$inject = ['$scope']

export default catalogController;

问题是无论我如何在服务中编写代码，当我尝试使用它时总是会出现错误，当我检查mapService以查看我的内容时，函数不存在。我尝试导入它并将其作为参数传递给构造函数，我尝试使用不同的方式创建服务，但我不能让它工作，每个人似乎都在使用不同的东西。

这两个文件都在一个名为'catalog'的文件夹中，在这个文件夹之外我有这个文件：

import angular from 'angular'
import catalog from './catalog/catalog'

let componentModule = angular.module('app.components', [
  catalog
])
.name

export default componentModule

又由另一个文件使用。整个结构都有效，因为我已经有了控制器和视图。我唯一的问题是如何创建和使用服务。任何帮助将不胜感激，因为我已经花了很多天！如果需要，我可以提供更多细节。谢谢:)）

Answer 1

根据DI，做一些改变：

地图服务：

import angular from 'angular'
import angularConfig from '../angularConfig/angularConfig'

export default class Maps {
  constructor($http){}

  initializeMap (element, options){
    return new Promise(function(resolve){
      return resolve(new google.maps.Map(document.getElementById(element), options))
    })
  }
}

Maps.$inject = ['$http']

angular.module(Maps, [])
  .service('maps.service', Maps)

catalogController

class catalogController {
  constructor($scope, mapsService) {}

  $onInit () {
    // map init

    this.mapService.initializeMap(param1, param2)
      .then(() => {
        console.log('it worked!!')
      })
  }
}

catalogController.$inject = ['$scope', 'mapsService']

export default catalogController;

PS：这是一个很好的例子：https://github.com/FountainJS/generator-fountain-angular1

ES6 Angular1服务语法，如何创建服务并使用它？

1 个答案: