简体   繁体   中英

Registering AngularJS Service with ES6 syntax

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:

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:

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

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'
  ])

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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM