angular.js - How to create a global service like $http in Angular?

Question

• I want to write a global tool class, I declare ng service in a separate js file (and load it into html)

(function(angular){
    "use strict";
    angular.module('testModule',function(){
        return {
            test : function(){
                console.info('testModule is ready!');
            }
        }
    });
})(window.angular);

• Then I want to inject testModule into the controller of appmodule, but it prompts that the injection failed

var mainApp = angular.module('mainApp',[]);
mainApp.controller('homeController',['testModule',function(testModule){
  testModule.test();
}]);

"Error: [$injector:unpr] Unknown provider: testModuleProvider

Answer 1

Thank you, what you wrote is only 30% correct. Two topics are involved here:

1. Different modules

angular.module('testModule') 和 angular.module('mainApp',[]) 是两个不同的module，你想要在 mainApp 中使用 testModule，那么你需要在 angular.module('mainApp', [ 'testModule' ]) Import this dependency.

2. The global tool class is written incorrectly

Someone answered it above:

(function(angular){
    "use strict";
    angular.module('testModule', []).factory('alertService', function() {
        return {
            test : function(){
                console.info('testModule is ready!');
            }
        }
    });
})(window.angular);

When in use, you can:

var mainApp = angular.module('mainApp',[ 'testModule' ]);
mainApp.controller('homeController',['alertService',function(alertService){
  alertService.test();
}]);

The above code has not been verified and there should be no structural problems. Please debug and solve it by yourself.

Answer 2

Just define your service as a module, for example:

  var appServices = angular.module('myApp.services', []);
    appServices.factory('alertService', function($rootScope) {
        var alertService = {};
        return alertService;
    });