使用ES6语法注册AngularJS服务 [英] Registering AngularJS Service with ES6 syntax

问题描述

我正在尝试使用ES6导入/导出语法创建和注册新服务，但我不知道什么是正确的格式。我唯一的工作方式如下，如果我在注册AccountService时在我的index.module.js中使用引号，它会中断。我应该在我的服务文件中创建新的services.account-service模块吗？为什么当我不使用引号时服务才适当注入？谢谢！

I'm attempting to create and register a new service using the ES6 import/export syntax, but I'm not sure what the right format is. The only way I've gotten it to work is as follows, if I use quotes in my index.module.js when injecting AccountService, it breaks. Should I be creating the new services.account-service module in my service file? Why is the service only properly injected when I don't use quotes? Thanks!

account.service.js：

account.service.js:

class AccountService {

  exportTrack(response, account) {
      return {
          method: 'PUT',
          url: 'https://api.spotify.com/v1/me/tracks?ids=' +response.data.tracks.items[0].id+ '&type=track&market=US',
          headers: {
              'Authorization': 'Bearer ' + account.auth
          }
      };
  }
}

export default angular.module('services.account-service', [])
  .service('AccountService', AccountService)
  .name;

index.module.js：

index.module.js:

import { config } from './index.config';
import { routerConfig } from './index.route';
import { runBlock } from './index.run';

import HeaderController from '../app/components/header/header.controller';
import SidenavController from '../app/components/sidenav/sidenav.controller';
import LoginController from './login/login.controller';
import AccountController from './account/account.controller';
import AccountService from './account/accountService-service';
import TrackController from './track/track.controller';
import PlaylistController from './playlist/playlist.controller';
import { Velociraptor } from '../app/components/services/velociraptor-service'; // Component Loopback service (lb-ng)

angular.module('velociraptor-ui',[
    'ngAnimate',
    'ngCookies',
    'ngTouch',
    'ngSanitize',
    'ngMessages',
    'ngAria',
    'ngResource',
    'ui.router',
    'ngMaterial',
    'Velociraptor',
    'toastr',
    AccountService
  ])
  .constant('moment', moment)
  .config(config)
  .config(routerConfig)
  .run(runBlock)
  .controller('HeaderController', HeaderController)
  .controller('SidenavController', SidenavController)
  .controller('LoginController', LoginController)
  .controller('AccountController', AccountController)
  .controller('TrackController', TrackController)
  .controller('PlaylistController', PlaylistController);

推荐答案

我的猜测是通过'在我的索引中使用引号.module.js注入AccountService时你的意思是这样做：

My guess is that by 'use quotes in my index.module.js when injecting AccountService' you mean that you do something like this:

angular.module('velociraptor-ui',[
    ...
    'AccountService'
  ])

这样就不行了。导入的角色模块的名称仍然是 services.account-service （无论如何调用ES6模块），而 AccountService 变量等于'services.account-service'字符串。

And this way it won't work. The name of imported Angular module is still services.account-service (no matter how ES6 module was called), and AccountService variable equals to 'services.account-service' string.

我认为导出 name 属性是模块化角度工作流程的坚实模式正在导出/导入的是什么。

I consider exporting name property a solid pattern for modular Angular workflow, just mind what exactly is being exported/imported.

这篇关于使用ES6语法注册AngularJS服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！