Angularjs - Best Practice für die Definition einer Utility-Bibliothek

Question

ich meine ersten Schritte mit Winkel geben, und ich brauche ein Dienstprogramm Helfer Bibliothek, mit ein paar Funktionsmethoden zu definieren, so etwas wie

dataHelper.parse, dataHelper.sanitize usw.

Was wäre der empfohlene Weg, um es in eckigen zu organisieren?

Answer 1

Für Utility-Methoden würde ich sie in einer Bibliothek außerhalb des Angular-Frameworks organisieren, aber mit einer kleinen Abhängigkeit von angular.extend. Wenn Sie möchten, dass Ihre Bibliothek vollständig unabhängig von Angular ist, können Sie extend durch eine eigene Implementierung ersetzen.

Ihren Dienstprogramm-API in einem JavaScript-Gehäusen wickeln und die Bibliothek als eine Eigenschaft von window aussetzen (im Beispiel unten, ich habe meine Bibliothek mylibrary genannt, aber du bist frei je nachdem, welche Namen Ihrer Wahl zu wählen). Wenn Sie Ihre Bibliothek als eine Eigenschaft von window anhängen, können Sie "myLibrary" ohne Einschränkung referenzieren. Wenn Sie neugierig sind, ist dies genau wie die eckige-Bibliothek ausgesetzt ist.

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

Nutzungs

Wenn das Skript hinzugefügt wird, können Sie Ihre Bibliothek verwenden, um von überall - Dienstleistungen, Fabriken, Anbieter, Controller, Richtlinien usw.

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

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

Utility Library vs Winkeldienste

Der Grund, dass ich Dienstprogramm vorziehe Funktionen in ihrer eigenen Bibliothek statt in eckigen Diensten zu halten ist, weil ich denke, dass sie getrennt von dem eckigen Ökosystem sind. Diese Dienstprogrammfunktionen sind ziemlich eigenständig und sind modulunabhängig, während eckige Dienste/Fabriken eng mit anderen Teilen von angular, einschließlich Controllern und Direktiven, arbeiten und sehr eng mit dem Modul verbunden sind.

Erweiterung Angular

Wenn Sie wirklich wollten, könnten Sie auch die Winkel Bibliothek erweitern sich. Ersetzen Sie einfach myLibrary durch angular im Skript (Hinweis: Dies ist möglicherweise nicht ratsam, da es Ihre Skripte von der Angular-Implementierung abhängig machen würde).

Answer 2

eine benutzerdefinierte erstellen 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(){ 

     // ... 
    } 

    }; 
}); 

Sie es injizieren können, wo immer sie benötigt wird. Wenn Sie einige Logik in separate Dienste (z. B. parseService) bündeln können, sollten Sie dies tun.

Wenn Sie etwas flexibler oder konfigurierbar benötigen, schauen Sie sich die Anbieter an.

Answer 3

Um @pixelbits' Antwort zu verlängern, wenn Sie Ihre externen Abhängigkeiten explizit halten möchten, können Sie ziemlich leicht wickeln bestehende Bibliotheken für die Verwendung mit kantigem, wie dies für momentjs:

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