Question

This seems like it should be easy, but I can’t find documentation on it. I’m wondering how to make an Angular component (let’s say a filter) reusable in different apps. I’ve made a simple filter that formats a phone number, and I’d like to be able to use it in any app. Currently it is declared like this:

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

myModule.filter('formatFilter', function() {
  return function(input) {
    return input.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
  }
});

The question is how to make this filter reusable. Right now it’s just attached to ‘myModule’, but how can I take it out of this file so I can reuse it elsewhere too?

Answer 1

You started OK by encapsulating your filter in a separate module. For other apps to use it, those apps will just need to include source code of your filter and declare dependency on a module:

angular.module('myApp',['myModule'])

You would probably like to rename your filter-holding module to something more meaningful, something like phoneFormatter or sth.