ES6 angular service module not being passed around correctly?

Charles Watson

Using Angular 1.5 with ES6 classes, I have an operating application.

I created a service:

class EnterpriseService {
    /*@ngInject*/
  constructor($http) {
    this.http = $http;
  };

  getData() {
    return this.http.get('http://localhost:3000/').then(function(response) {
      return response;
    });
  }
}

EnterpriseService.$inject = ["$http"];
export default EnterpriseService;

And I inject it into my controller:

class EnterpriseController {
  /*@ngInject*/
  constructor(EnterpriseService, $scope) {
    this.name = 'enterprise';
    this.systemId = 20003
    this.pageLink = '#/enterprise';
    this.EnterpriseService = EnterpriseService;
    this.getEnterpriseData();
    this.scope = $scope;
    console.log(this.EnterpriseService);
  }

  getEnterpriseData() {
    scope.stores = this.EnterpriseService.getData();
  }
}

EnterpriseController.$inject = ["EnterpriseService", "$scope"];
export default EnterpriseController;

I am importing the service into my component file that bootstraps the overall component:

import template from './enterprise.html';
import controller from './enterprise.controller';
import './enterprise.less';
import servicesModule from './enterprise.service';

let enterpriseComponent = function () {
  return {
    restrict: 'E',
    scope: {},
    template,
    controller,
    controllerAs: 'vm',
    bindToController: true
  };
};

export default enterpriseComponent;

As of now, I get the infamous unknown service provider error. My assumption is that it has to do with the fact that I never instantiate my service class as an Angular service by including it on an Angular module, ie: angular.module('enterpriseService', enterpriseService)

But I'm not sure how to go about doing that in this ES6 environment.

Should there be another single file that bootstraps all service modules that then gets included? What exactly would that look like?

Eyowzitgoin

It looks like you're trying to call the function which uses "$scope" before scope is saved off. Try moving the line this.scope = $scope; above this.getEnterpriseData(): in your code here:

class EnterpriseController {
  /*@ngInject*/
  constructor(enterpriseService, $scope) {
    this.name = 'enterprise';
    this.systemId = 20003
    this.pageLink = '#/enterprise';
    this.EnterpriseService = EnterpriseService;
    this.getEnterpriseData();
    this.scope = $scope;
    console.log(this.EnterpriseService);
  }

It should look like this:

class EnterpriseController {
  /*@ngInject*/
  constructor(enterpriseService, $scope) {
    this.name = 'enterprise';
    this.systemId = 20003
    this.pageLink = '#/enterprise';
    this.EnterpriseService = EnterpriseService;
    this.scope = $scope;
    this.getEnterpriseData();
    console.log(this.EnterpriseService);
  }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

stdout is not being passed correctly?

From Dev

GET form not being passed correctly

From Dev

Displaying data from Struct being passed around

From Dev

PostgreSQL function parameters not being passed correctly

From Dev

Boolean value not being passed in Angular

From Dev

Angular Service not being called

From Dev

yo angular not being issued correctly

From Dev

How to manage the allocation of many small objects being passed around?

From Dev

Unknown provider in test case for angular with es6 module

From Dev

Unknown provider in test case for angular with es6 module

From Dev

How to convert an angular $resource factory (not service) to ES6

From Dev

Undefined service provider angular 1.6 and es6

From Dev

Parameters in MVC not being correctly passed into the view from routing

From Dev

How to import a module in es6 that itself needs to invoke/initialize its function/class before being imported

From Dev

Service data not being updated Angular

From Dev

Why are no query parameters being passed to my NancyFX module?

From Dev

Symfony 3.2 parameters not being passed to service's __construct method

From Dev

Want to know what variable(query) is being passed around in the following lines of code

From Dev

Adding a Second Service to an Angular Module

From Dev

Relationship of Service and Module in Angular (2)

From Dev

Why is my service not being loaded correctly only in one of my controllers?

From Dev

Ionic angular service --> Regular module to anonymous module

From Dev

Ionic angular service --> Regular module to anonymous module

From Dev

ES6 module scope

From Dev

How to import angular.IInjectorService using the ES6 module syntax in TypeScript

From Dev

Failed to instantiate module when using ES6 let with firefox and angular

From Dev

ES6 Module Loader Doesn't Load Angular Controller written using TypeScript

From Dev

Angular 1.x and es6 multiple constants in a singular module

From Dev

How to Inject Angular2 Http service into es6/7 Class?

Related Related

  1. 1

    stdout is not being passed correctly?

  2. 2

    GET form not being passed correctly

  3. 3

    Displaying data from Struct being passed around

  4. 4

    PostgreSQL function parameters not being passed correctly

  5. 5

    Boolean value not being passed in Angular

  6. 6

    Angular Service not being called

  7. 7

    yo angular not being issued correctly

  8. 8

    How to manage the allocation of many small objects being passed around?

  9. 9

    Unknown provider in test case for angular with es6 module

  10. 10

    Unknown provider in test case for angular with es6 module

  11. 11

    How to convert an angular $resource factory (not service) to ES6

  12. 12

    Undefined service provider angular 1.6 and es6

  13. 13

    Parameters in MVC not being correctly passed into the view from routing

  14. 14

    How to import a module in es6 that itself needs to invoke/initialize its function/class before being imported

  15. 15

    Service data not being updated Angular

  16. 16

    Why are no query parameters being passed to my NancyFX module?

  17. 17

    Symfony 3.2 parameters not being passed to service's __construct method

  18. 18

    Want to know what variable(query) is being passed around in the following lines of code

  19. 19

    Adding a Second Service to an Angular Module

  20. 20

    Relationship of Service and Module in Angular (2)

  21. 21

    Why is my service not being loaded correctly only in one of my controllers?

  22. 22

    Ionic angular service --> Regular module to anonymous module

  23. 23

    Ionic angular service --> Regular module to anonymous module

  24. 24

    ES6 module scope

  25. 25

    How to import angular.IInjectorService using the ES6 module syntax in TypeScript

  26. 26

    Failed to instantiate module when using ES6 let with firefox and angular

  27. 27

    ES6 Module Loader Doesn't Load Angular Controller written using TypeScript

  28. 28

    Angular 1.x and es6 multiple constants in a singular module

  29. 29

    How to Inject Angular2 Http service into es6/7 Class?

HotTag

Archive