CODEWITHSUNDEEP
angularjs
Lukas Lukac
Lukas Lukac

Reputation: 8346

AngularJS access service from different module

'use strict';

var trkiApp = angular.module('trkiApp', [ 
  'trkiApp.tStatus', 
  'trkiApp.feed'
]);



var tStatus = angular.module('trkiApp.tStatus', [])
    .factory('Status', ['$q']);

var feed = angular.module('trkiApp.feed', []);

And now i dont understand how is possible that i can access the service Status which is defined on another module?

'use strict';

feed
    .controller('FeedController', ['$scope','$http','Status']);

I should not right? But somehow i am...or is that a correct behaviour?

Upvotes: 32

Views: 37264

Answers (3)

Alex Choroshin
Alex Choroshin

Reputation: 6187

A Module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. Modules can list other modules as their dependencies. Depending on a module implies that required module needs to be loaded before the requiring module is loaded.

var myModule = angular.module('myModule', ['module1','module2']);

When you injected your module, the services got registered during the configuration phase and you could access them, so to make a long story short, it's the correct behavior and the core fundamentals of dependency injection in Angular. For example

angular.module('module1').service('appservice', function(appservice) {
   var serviceCall = $http.post('api/getUser()',"Role");
});

So how it can be accessed using angular.module('myModule');

angular.module('myModule').controller('appservice', function(appservice)
{
    var Servicedata= appservice.ServiceCall('role');
}

This how it can be accessed. If anyone has another suggestion please say so.

Upvotes: 56

Raja Ghosh
Raja Ghosh

Reputation: 11

after made some changes html should look like:

<body ng-app="myModule" ng-controller="appservices"></body>

Above section of code used to bootstrap your angular module

angular should look like:

 var myModule = angular.module('myModule', ['module1','module2']);
    myModule.controller("appservices",["$scope","mod1factory","mod2factory",function($scope,mod1factory,mod2factory){

       console.log(mod1factory.getData()) ;
       console.log(mod2factory.getData()) ;
    }]);
    var mod1 = angular.module('module1',[]);
    mod1.factory("mod1factory",function(){
        var mod1result = {};
        mod1result = {
            getData: function(){
                return "calling module 1 result";
            }
        }
        return mod1result;
    });
    var mod2 = angular.module('module2',[]);
    mod2.factory("mod2factory",function(){
        var mod2result = {};
        mod2result = {
            getData: function(){
                return "calling module 2 result";
            }
        }
        return mod2result;
    });

Explanation: created a main module myModule and inject other modules(in my case module1 and module2) as dependency so by this you can access both the module inside the main module and share the data between them

console.log(mod1factory.getData()) ;
console.log(mod2factory.getData()) ;

created two factory and inject it in my controller mod1factory and mod12factory in my case . so mod1 & mod2 are both differnt modules but can share info. inside main controller myModule

Upvotes: 1

Ravi
Ravi

Reputation: 301

I had a similar issue when trying to inject dependencies from another module. Alex's answer didn't work for me. I was getting a circular dependencies error.

To fix it, make sure you are including all the module-specific JavaScript before. For example moduleA was defined in another JS file.

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

app.controller('MainCtrl', function($scope, MainService) {
  $scope.name = 'World';

  $scope.hello = MainService.hello();

});

Working example Plunker

Upvotes: 0

Related Questions