inject a service in a component from the diff file - Angularjs 1.6

Question

I need a help. I use Angularjs 1.6 and I want just simply to inject a service from diff file in a controller. Looks pretty easy, aha) Before I read this: AngularJS: Service in different file. But it didn't work in my case.

My code looks next:

app.js

angular.module('myApp', ['formService', 'formLogic'])

component.js

angular.module('formLogic',[])
.component('formLogic',{
    templateUrl: './templates/form-logic.html',
    controller: function ($scope, formService){

    }
});

service.js

angular.module('formService',[])
.service('FormService', function($http){

});

But I got this error: Error: $injector:unpr Unknown Provider

Thanks for your help!

A-ha) it seems I inject in a wrong module and I don't need upperCase for the service. — Tima Tru
– Tima Tru, Commented Aug 10, 2017 at 22:33

hayzey · Accepted Answer · 2017-08-11 00:23:06Z

2

Don't give your modules the same name as your providers (don't name both your module and your component "formLogic").
Add your "formService" module as a dependency on your "formLogic" module.
You have called your service "FormService" and are trying to inject "formService" into your component controller. "formService" is not a service that you have defined, it's the name of your module.

answered Aug 11, 2017 at 0:23

hayzey

4632 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaishab Roy · Accepted Answer · 2017-08-11 05:39:49Z

To inject component and services from different module. Can inject the module.

component.js

angular.module('anotherModule',[])
.component('formLogic',{
    templateUrl: './templates/form-logic.html',
    controller: function ($scope, formService){

    }
});

service.js

angular.module('anotherModule')
.service('formService', function($http){

});

so no can use formService and formLogic from myApp module

like:

app.js

angular.module('myApp', ['anotherModule']) // injected `anotherModule` in `myApp` modele

mainController.js

angular.module('myApp').controller('MainCtrl', function($scope, formService) {
  // can access `formService` from here
});

OR

you can use same module like:

var app = angular.module('myApp', []);

app.component('formLogic',{
   templateUrl: './templates/form-logic.html',
   controller: function ($scope, formService){
      // ...
   }
});

app.service('formService', function($http){
    //.....
 });

app.controller('MainCtrl', function($scope, formService) {
    // can access `formService` from here
});

Collectives™ on Stack Overflow

inject a service in a component from the diff file - Angularjs 1.6

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related