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

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) 

你可以看到它的一个简单的类用里面的方法。 在几个例子的基础上，我放了一个对an​​gular.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以查看里面有什么时，函数不在那里。 我试图导入它并将它作为参数传递给构造函数，我试着用创建服务的不同方式尝试，但我无法使其工作，每个人似乎都在使用不同的东西。

这两个文件是一个名为“目录”的文件夹里面，这个文件夹外，我有这个文件：

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