Wie man eine wiederverwendbare AngularJs-Komponente herstellt

Question

Das scheint, als sollte es einfach sein, aber ich kann keine Dokumentation darüber finden. Ich frage mich, wie man eine Angular-Komponente (beispielsweise einen Filter) in verschiedenen Apps wiederverwenden kann. Ich habe einen einfachen Filter erstellt, der eine Telefonnummer formatiert, und ich möchte sie in jeder App verwenden können. Derzeit ist es wie folgt deklariert:

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

Die Frage ist, wie man diesen Filter wiederverwendbar macht. Momentan ist es nur an 'myModule' angehängt, aber wie kann ich es aus dieser Datei herausnehmen, damit ich es auch woanders wiederverwenden kann?

Answer 1

Sie haben OK begonnen, indem Sie Ihren Filter in einem separaten Modul gekapselt haben. Für andere Anwendungen, es zu benutzen, werden diese Anwendungen müssen nur Quellcode Ihrer Filter enthalten und die Abhängigkeit von einem Modul deklarieren:

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

Sie würden wahrscheinlich Ihre Filter-Haltemodul an etwas Sinnvolles wie umbenennen , etwas wie phoneFormatter oder etw.

Answer 2

Nur als Beispiel:

Dies ist ein wiederverwendbarer Filter als Modul deklariert, so braucht nur an der app injiziert werden:

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

}); 

auf dieser Winkel Richtlinie verwendet: https://github.com/rolandocc/lov-angular-directive