如何制作可重用的 AngularJs 组件答案

【问题标题】：How to make a reusable AngularJs components如何制作可重用的 AngularJs 组件
【发布时间】：2013-02-04 21:05:24
【问题描述】：

这看起来应该很容易，但我找不到关于它的文档。我想知道如何使 Angular 组件（比如说过滤器）在不同的应用程序中可重用。我制作了一个简单的过滤器来格式化电话号码，我希望能够在任何应用程序中使用它。目前它是这样声明的：

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

问题是如何使这个过滤器可重复使用。现在它只是附加到“myModule”，但我怎样才能把它从这个文件中取出，以便我也可以在其他地方重用它呢？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

通过将过滤器封装在一个单独的模块中，您一开始还不错。对于其他应用程序使用它，这些应用程序只需要包含您的过滤器的源代码并声明对模块的依赖：

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

您可能希望将您的过滤器保持模块重命名为更有意义的名称，例如 phoneFormatter 或某事。

【讨论】：

好的，假设我有一个名为 myModule.js 的 .js 文件。我只是将它添加到我的页面，像你提到的那样初始化我的新模块，调用 {{phoneNumber|formatFilter}} 就可以了？ p.s.实际的过滤器格式不仅仅是电话号码，因此更抽象的名称。我只是在提问时简化了它。

【解决方案2】：

举个例子：

这是一个声明为模块的可重用过滤器，因此只需要在应用程序上注入：

过滤器：

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

应用：

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

用于这个角度指令：https://github.com/rolandocc/lov-angular-directive

【讨论】：