Cách tạo các thành phần AngularJs có thể tái sử dụng

Question

Điều này có vẻ dễ dàng, nhưng tôi không thể tìm thấy tài liệu về nó. Tôi đang tự hỏi làm thế nào để làm cho một thành phần góc (hãy nói một bộ lọc) tái sử dụng trong các ứng dụng khác nhau. Tôi đã tạo một bộ lọc đơn giản định dạng số điện thoại và tôi muốn có thể sử dụng nó trong bất kỳ ứng dụng nào. Hiện tại nó được tuyên bố như thế này:

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

Câu hỏi đặt ra là làm thế nào để bộ lọc này có thể tái sử dụng được. Ngay bây giờ nó chỉ gắn liền với 'myModule', nhưng làm thế nào tôi có thể lấy nó ra khỏi tập tin này để tôi có thể tái sử dụng nó ở nơi khác?

Answer 1

Bạn đã bắt đầu OK bằng cách đóng gói bộ lọc của mình trong một mô-đun riêng biệt. Đối với các ứng dụng khác để sử dụng nó, những ứng dụng sẽ chỉ cần phải có mã nguồn của bộ lọc của bạn và tuyên bố sự phụ thuộc vào một mô-đun:

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

Có thể bạn muốn đổi tên mô-đun bộ lọc giữ của bạn để một cái gì đó có ý nghĩa hơn , chẳng hạn như phoneFormatter hoặc sth.

Answer 2

Cũng như một ví dụ:

Đây là một bộ lọc tái sử dụng khai báo là một mô-đun, vì vậy chỉ cần được tiêm vào các ứng dụng:

Lọc:

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

App:

var demoApp = angular.module ('demoApp', ['bộ lọc yêu thích']) .config (function() {

}); 

sử dụng trên thị góc này: https://github.com/rolandocc/lov-angular-directive