将服务注入控制器 es6 语法答案

【问题标题】：inject service into controller es6 syntax将服务注入控制器 es6 语法
【发布时间】：2016-07-28 15:19:12
【问题描述】：

我正在尝试使用新的es6 语法编写angular app。拥有所有控制器和视图逻辑并正常工作，现在我想创建一个简单的共享service。这是我的服务：

var moduleName = 'app.services';
class EventService{
    constructor($http, moment){
        this.$http = $http;
        this.baseUrl = '/api/events';     
    }

    getEvents(){
    return this.$http({method: 'GET', url: this.baseUrl});
    }
}


EventService.$inject = ['$http', 'moment'];

angular.module(moduleName, [])
    .factory('eventSrv', EventService);

export default moduleName;

app.js 用于注册模块：

// Import angular
import 'angular';
// Material design css
import 'angular-material/angular-material.css';
// Icons
import 'font-awesome/css/font-awesome.css';
// Animation
import angularAnimate from 'angular-animate';
// Materail Design lib
import angularMaterial from 'angular-material';
// Router
import angularUIRouter from 'angular-ui-router';
//angular messages
import ngMessages from 'angular-messages';
//angular md-table css
import 'angular-material-data-table/dist/md-data-table.min.css';
//angular md-table
import 'angular-material-data-table/dist/md-data-table.min';
//moment
import 'moment';
import 'angular-moment';

//modules
import home from './home/home.module';
import event from './events/event.module';
import sidenav from './sidenav/sidenav.module';
import eventService from './shared/services/events-service';

// Project specific style
import './scss/bootstrap.scss'

// Create module
export const mod = angular.module('app', [
    angularMaterial,
    angularAnimate,
    angularUIRouter,
    'angularMoment',
    'md.data.table',
    eventService,
    home,
    event,
    ngMessages,
    sidenav
]);

mod.config(($stateProvider,$urlRouterProvider) => {
    $stateProvider.state('public', {
        url: "/public",
        abstract: true,
        views: {
            'sidenav': {
                templateUrl: require("./sidenav/sidenav.html"),
                controller: "SidenavController as sidenav"
            }
        }
    });
    $urlRouterProvider.when('', ['$state', '$match', function($state, $match){
        $state.go('public.home');
    }]);

});

我想将服务提供/注入到我的家庭控制器中，如下所示：

class HomeController {
    constructor($scope, eventSrv) {
        'ngInject';
        var vm = this;
    }
}

HomeController.$inject = ['eventSrv'];
export default HomeController;

主页模块：

import HomeConfig from './home.config';
import HomeController from './home.controller';
require('./home.scss');

let homeModule = angular.module('app.home', []);

homeModule.config(HomeConfig);
homeModule.controller('HomeController', HomeController);

export default homeModule = homeModule.name

当我将injecting 服务eventSrv 转换为homecontroller 时出现以下错误：

TypeError: Cannot call a class as a function

我在导入或配置中做错了什么？

【问题讨论】：

标签： javascript angularjs ecmascript-6

【解决方案1】：

eventSrv 服务应该是service:

angular.module(moduleName, [])
    .service('eventSrv', EventService);

factory 服务应该与注入器直接调用的工厂函数一起使用，ES6 类应该是newed。

【讨论】：

这应该是正确的答案。要纠正的另一件事是您应该将 $scope 添加到 HomeController.$inject = ['eventSrv'];应该是 HomeController.$inject = ['$scope','eventSrv'];
谢谢 estus，错误似乎已经消失了，然而，eventSrv 在注入后似乎是undefined..
看我上面的评论
好地方，@doge1ord！
由于代码被转译并且可以使用 ES.Next 特性，我建议static $inject = [...]; constructor(...) {...} 正是出于这个原因进行注释。当两个服务列表由类主体分隔时，更容易不匹配带注释的服务。

【解决方案2】：

angular.module(moduleName, [])
    .service('eventSrv', ()=> new EventService);

【讨论】：