AngularJS services independent of modules on multiple pages

Question

I have a table of users in the database behind my angular app. I have separate login, registration, and user management views as separate pages.

I want to define a service that keeps a list of user objects as they are loaded. If a new user is queried from the database, the record should be passed to the service and the service should return the existing object if available or create a new one otherwise. Additionally, the service should be able to disable unused objects when instructed to, and those objects should be set to uninitialized user objects. If create is subsequently called, instead of creating a new object, it should simply set the old object.

I also want to define a service (but, it shouldn't be called a service?) that defines a user object. That way, the user will not simply be a parsed JSON object but will also be decorated with methods for tracking any modifications and either committing or reverting those changes.

Since I have separate pages that all use the user object. I'd like to include the services on each page. According to AngularJS docs, to register a service I need to do something like:

var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});

However, this service is (as far as I can tell) inlined. I don't want to copy and paste code. I want to define the service in a separate file. The service should have no idea about what module is calling it. It should just exist to be attached to a module.

I tried creating a separate file services/user.js with the following syntax:

$provide.service('users', UserService);

This obviously did very little good as $provide was undefined. However, I don't know how to inject the $provide dependency into the service without attaching it to a module .

Is there a way to define a service independent of a module? Is there a way to define a model, decorated with model-specific functionality, independent of a module or a service?

Answer 1

You cannot have orphan services. However, that is the exact problem that modules solve.

You want to define a myBackend module which contains this service and then depend on this module in whichever app you want to use the service.

myBackend module:

var myBackend = angular.module('myBackend', []);
myBackend.factory('backendSerivce', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});

Where you want to use the service:

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

myModule.controller('myShinyController', function (backendService) {
  // ...
});

Now you can keep your various applications oblivious of the JSON representation of the objects and only return User objects from the service.

Answer 2

A separate module is definitely the way to go. But, if you are for some reason loading the file at a separate time you can expose $provide through your main modules config block. This might look something like:

var myApp = angular.module('myApp',[]);
myApp.config(function($controllerProvider,$filterProvider,$compileProvider,$provide){
    myApp.register =
        {
            controller: $controllerProvider.register,
            directive: $compileProvider.directive,
            filter: $filterProvider.register,
            factory: $provide.factory,
            service: $provide.service,
            constant: $provide.constant
        };
});

Then in any subsequently loaded files you can access myApp.register... factory..service ..etc. This is often the technique used if you're using angular + require js