angular.js - thực hành tốt nhất để xác định một thư viện tiện ích

Question

tôi đưa ra những bước đầu tiên của tôi với góc cạnh, và tôi cần phải xác định một thư viện tiện ích trợ giúp, với một vài phương pháp chức năng, một cái gì đó giống như

dataHelper.parse, dataHelper.sanitize , v.v.

Cách được đề xuất để sắp xếp hình ảnh theo góc cạnh là gì?

Answer 1

Đối với các phương thức tiện ích, tôi sẽ sắp xếp chúng trong thư viện bên ngoài khung công tác Angular, nhưng với sự phụ thuộc nhỏ vào angular.extend. Nếu bạn muốn thư viện của mình hoàn toàn độc lập với Angular, bạn có thể thay thế extend bằng cách triển khai của riêng bạn.

Quấn API tiện ích của bạn trong một bao vây JavaScript và tiếp xúc với thư viện của bạn như một tài sản của window (trong ví dụ dưới đây, tôi đã đặt tên của tôi thư viện myLibrary, nhưng bạn tự do lựa chọn bất cứ tên nào bạn thích). Bằng cách đính kèm thư viện của bạn với tư cách là tài sản của window, bạn sẽ có thể tham chiếu 'myLibrary' mà không đủ điều kiện. Nếu bạn tò mò, đây chính xác là cách hiển thị thư viện góc cạnh.

(function (window, document) { 
    'use strict'; 

    // attach myLibrary as a property of window 
    var myLibrary = window.myLibrary || (window.myLibrary = {}); 

    // BEGIN API 
    function helloWorld() { 
     alert('hello world!'); 
    } 

    function utilityMethod1() { 
     alert('Utility Method 1'); 
    } 

    function utilityMethod2() { 
     alert('Utility Method 2'); 
    } 
    // END API 

    // publish external API by extending myLibrary 
    function publishExternalAPI(myLibrary) { 
     angular.extend(myLibrary, { 
      'helloWorld': helloWorld, 
      'utilityMethod1': utilityMethod1, 
      'utilityMethod2': utilityMethod2 
     }); 
    } 


    publishExternalAPI(myLibrary); 

})(window, document); 

Cách sử dụng

Một khi kịch bản được thêm vào, bạn có thể sử dụng thư viện của bạn từ bất cứ nơi nào - dịch vụ, nhà máy, nhà cung cấp, điều khiển, chỉ thị, vv

<script type='text/javascript' src='angular.js'></script> 
<script type='text/javascript' src='myLibrary.js'></script> 

<script> 
     myLibrary.helloWorld(); 
     myLibrary.utilityMethod1(); 
     myLibrary.utilityMethod2(); 
</script> 

Thư viện Utility vs Dịch vụ Góc

Lý do tôi thích tiện ích chức năng cư trú trong thư viện riêng của họ thay vì trong các dịch vụ góc là bởi vì tôi nghĩ về chúng như là tách biệt với hệ sinh thái góc. Các chức năng tiện ích này khá độc lập và không phụ thuộc vào mô-đun, trong khi các dịch vụ/nhà máy góc làm việc chặt chẽ với các phần khác của góc, bao gồm các bộ điều khiển và chỉ thị, và được gắn kết chặt chẽ với mô-đun.

Mở rộng góc

Nếu bạn thực sự muốn, bạn thậm chí có thể mở rộng thư viện góc riêng của mình. Chỉ cần thay thế myLibrary bằng angular trong tập lệnh (Lưu ý: điều này có thể không được khuyến khích vì nó sẽ làm cho tập lệnh của bạn phụ thuộc vào việc triển khai Góc).

Answer 2

Tạo một tùy chỉnh service

globalModule.service('toolkit',function(){ 

return{ 

    getDate: function(altFormat){ 
     var today = new Date(); 
     var dd = today.getDate(); 
     var mm = today.getMonth()+1; //January is 0! 

     var yyyy = today.getFullYear(); 
     if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = yyyy +'-'+ mm+'-'+dd; 

     if(altFormat){ 
      today = today.replace(/-/g, '.'); 
     } 

     return today; 
    }, 

    /** 
    * Returns a 32 character ID [ XXXXXXXX - XXXXXXXXXXXXXXXXXXXXXXXX ] 
    * @returns {string} 
    */ 

    newGUID: function(){ 

     // ... 
    } 

    }; 
}); 

Bạn có thể tiêm nó bất cứ nơi nào nó là cần thiết. Nếu bạn có thể gộp một số logic vào các dịch vụ riêng biệt (ví dụ: parseService) Tôi nghĩ bạn nên làm như vậy.

Nếu bạn cần điều gì đó linh hoạt hơn hoặc có thể định cấu hình, hãy xem nhà cung cấp.

Answer 3

Để mở rộng câu trả lời @pixelbits', nếu bạn muốn giữ phụ thuộc bên ngoài của bạn rõ ràng, bạn có thể khá dễ dàng quấn thư viện hiện có để sử dụng với kiễu góc, như thế này cho momentjs:

angular.module('testApp') 
.constant('moment', moment)