How to make a reusable AngularJs components

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?

pkozlowski.opensource · Accepted Answer · 2013-02-04 21:28:48Z

7

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.

answered Feb 4, 2013 at 21:28

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Spencer Over a year ago

Alright, so let's say I have a .js file called myModule.js. I just add that to my page, initialize my new module like you mentioned, call {{phoneNumber|formatFilter}} and that's it? p.s. the actual filter formats more that just phone numbers, hence the more abstract name. I just simplified it when asking the question.

RolandoCC · Accepted Answer · 2014-06-19 17:23:13Z

2

Just as an example :

This is a reusable filter declared as a module, so only needs to be injected on the app:

Filter:

angular.module("lov-filter", []).filter('StartOnPage', function () {
    return function (input, start) {
        start = +start;
        return input.slice(start);
    }
});

App:

var demoApp = angular.module('demoApp', ['lov-filter']) .config(function () {
});

Used on this angular directive: https://github.com/rolandocc/lov-angular-directive

edited Jun 19, 2014 at 17:23

answered May 16, 2014 at 20:43

RolandoCC

8881 gold badge14 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to make a reusable AngularJs components

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related