Come creare componenti AngularJs riutilizzabili

Question

Sembra che dovrebbe essere semplice, ma non riesco a trovare la documentazione su di esso. Mi chiedo come rendere un componente Angolare (diciamo un filtro) riutilizzabile in diverse app. Ho creato un filtro semplice che formatta un numero di telefono e mi piacerebbe poterlo usare in qualsiasi app. Attualmente si dichiara in questo modo:

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"); 
    } 
}); 

La domanda è: come fare questo riutilizzabile filtro. In questo momento è solo collegato a "myModule", ma come posso estrarlo da questo file in modo da poterlo riutilizzare anche altrove?

Answer 1

È stato avviato OK incapsulando il filtro in un modulo separato. Per le altre applicazioni di usarlo, queste applicazioni avranno solo bisogno di includere il codice sorgente del vostro filtro e dichiarare la dipendenza da un modulo:

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

Si sarebbe probabilmente desidera rinominare il modulo porta-filtro a qualcosa di più significativo , qualcosa come phoneFormatter o sth.

Answer 2

A titolo di esempio:

Questo è un filtro riutilizzabile dichiarata come modulo, così ha solo bisogno di essere iniettato sul app:

Filtro:

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() {

}); 

utilizzate in questa direttiva angolare: https://github.com/rolandocc/lov-angular-directive