How can I create a shared utility to use with two different AngularJS apps (on different html pages)?

Issue

I'm working on a multi-page site using AngularJS, and I want to write a utility that can be included in more than one page. I've looked at services and providers, and all the examples I find are single-page examples. I'm not sure how to generalize this to multiple apps used on different pages.

This is what I want to have for my two different pages/apps.

in app1.js:

var app1 = angular.module('app1',['myUtil'])
app1.controller('ctrl1',function ctrl1($scope,myUtil){...})

in app2.js:

var app2 = angular.module('app2',['myUtil'])
app2.controller('ctrl2',function ctrl2($scope,myUtil){...})

in myUtil.js:

??? Provider? Service? Module?

All the examples I have found for providers and services show them as being attached to a single app. Is this possible with AngularJS? If so, what am I missing?

Solution

The answer from zero298 is a nice answer as it's a great way of organising and reusing the utility module you create.

If you want a less broad and more "codey" answer, then one way of doing it would be to have some kind of utility module that houses whatever services you want to put in it, and then you can pass that in as a dependency for all apps that use it. This will all depend on your build process as to how you import/organise the files, but as a very basic example you could have a "utilsmodule" module with a "utils" service:

myUtils.js:

angular.module('utilsmodule', []);

// Service could be in another file
angular.module('utilsmodule').service('myutil', function() {
  return {
    myUtilFunction : function() {
      return "This is from myutil";
    }
  };
});

Then in your app files you can pass in the module by name, which will give the app access to the 'myutil' service.

app1.js:

var app1 = angular.module('app1',['utilsmodule'])
app1.controller('ctrl1',function ctrl1($scope,myutil){...})

Then you would import the myUtils.js file before the app1.js file so that the "utilsmodule" module is registered with angular before your app is created. You do the same with app2 and the utility module should be available to both.

Example Plunker

Answered By - Christian