faizanjehangir faizanjehangir - 4 months ago 106
AngularJS Question

inject service into controller es6 syntax

I am trying to write

angular app
using new
es6
syntax. Having all the controllers and views logic in place and working, Now I want to create a simple shared
service
. Here is my 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
for registering modules:

// 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');
}]);

});


I want to provide/inject the service into my home controller, which looks like this:

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

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


Home module:

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


I am getting the following error when I am
injecting
the service
eventSrv
into
homecontroller
:

TypeError: Cannot call a class as a function


what am I doing wrong in my imports or configuration?

Answer

eventSrv service should be service:

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

factory services are supposed to be used with factory functions which are called directly by injector, ES6 classes should be newed.