use angular.js directives in different applications?

Question

I have a directive that I want to use in various places.

var app1 = angular.module("App1"...);
app1.directive('ngFoo' ...   );

other Webpage:

var app2 = angular.module("App2"...);
app2.directive('ngFoo'  ...   );

How can I add the code of the directive in a practical way in different pages? What is there best practice?

Answer 1

What you are looking for is a module pattern , that creates the ability to reuse code easily. If the directive is the same for app1 and app2 i suggest to create your own module for the directive:

angular.module('myDirectiveModule', []).directive('ngFoo', ...);

Then, if you want to use the directive in app1 you include it as dependency of your app1 module:

angular.module('app1', ['myDirectiveModule']);

You can then just go ahead and use the directive in app1. The same is true, if you want to use the directive in app2:

angular.module('app2', ['myDirectiveModule']);

So the directive becomes it's own reusable module.