Including External Factories in AngularJs Modules

Question

I would like to create a factory to abstract my $http calls. I would like to use this factory in multiple modules, but I only wish to maintain one copy of the file.

I see that I am doing something similar with kendo.directives :

angular.module('createPolicy', ['kendo.directives'])
    .controller('CreatePolicyController', ['$scope', function ($scope) {

How can I create my factory such that I can simply include it like kendo.directives after I include the .js source?

For example:

angular.module('createPolicy', ['kendo.directives', 'myPolicyService'])
    .controller('CreatePolicyController', ['$scope', function ($scope) {

How would I have to construct the factory to be able to use it like that?

Edit: I have the following in angular-factories.js:

var policyService = angular.module("PolicyService", []);
policyService.factory('PolicyService', function ($http) {
    return {
        getFoos: function () {
            //return the promise directly.
            return $http.get('/foos')
                      .then(function (result) {
                          //resolve the promise as the data
                          return result.data;
                      });
        }
    }
});

Then, in a different file, I try to use it like so:

angular.module('createPolicy', ['kendo.directives', 'PolicyService'])
    .controller('CreatePolicyController', ['$scope', function ($scope, policyService) {
        $scope.editPolicy = true;
        $scope.packages = [];

        console.log(policyService.getFoos());

But, I get the error:

TypeError: Cannot read property 'getFoos' of undefined

I am including the files like this (in ASP.NET MVC):

bundles.Add(new ScriptBundle("~/bundles/jqueryplugins").Include(
    "~/Scripts/angular.min.js",
    "~/Scripts/angular-factories.js",
    "~/Scripts/kendo.all.min.js",
    "~/Scripts/kendo.aspnetmvc.min.js"));

Answer 1

You would define your own module.

var specialHttpModule = angular.module("specialHttpModule", []);
specialHttpModule.service("someSpecialService", someSpecialService);

This would be in the .js file for this module. Then, you would be able to include it as a dependency or retrieve it with angular.module("specialHttpModule"); To add it to your createPolicy module you need to add the module name to the list of dependencies:

angular.module('createPolicy', ['kendo.directives', 'specialHttpModule'])

Then all the services, directives and controllers declared in specialHttpModule will be available in your module to inject:

.controller('CreatePolicyController', ['$scope', 'someSpecialService',
    function ($scope, someSpecialService) {

Answer 2

Instead of service or factory use the Provider version of same with get property on object returned and configure same provider in multiple modules in the config section

Factory:

angular.module('myApp')
 .factory('myService', function() {
 return {
     'username': 'auser',
     'url': ''
      'setUrl': function(inputUrl){
          this.url = inputUrl;
      }
 }
})

Equivalent Provider:

var appProvider = angular.module('appProvider', []);
    appProvider.provider('myService', {
        $get: function() {
          return {
             'username': 'auser',
             'url': ''
             'setUrl': function(inputUrl){
                 this.url = inputUrl;
              }
          }
        }
     });

Configuring the provider in multiple modules:

Module 1:

angular.module('myApp', ['appProvider'])
 .config(function(myServiceProvider) {
     myServiceProvider
         .setUrl("stackoverflow.com");
});

Module 2:

angular.module('secondApp', ['appProvider'])
 .config(function(myServiceProvider) {
     myServiceProvider
         .setUrl("google.com");
});