angular.js - le migliori pratiche per la definizione di una libreria di utilità

Question

sto dando i primi passi con angolare, e ho bisogno di definire una libreria di utilità di supporto, con un paio di metodi di funzione, qualcosa come

dataHelper.parse, dataHelper.sanitize , ecc.

Quale sarebbe il modo consigliato di organizzarlo in modo angolare?

Answer 1

Per i metodi di utilità, li organizzerei in una libreria esterna al framework Angular, ma con una piccola dipendenza da angular.extend. Se vuoi che la tua libreria sia completamente indipendente da Angular, puoi sostituire extend con la tua implementazione.

avvolgere l'API di utilità in un recinto Javascript e esporre la libreria come una proprietà di window (nell'esempio qui sotto, ho chiamato il mio biblioteca MyLibrary, ma sei libero di scegliere quale nome). Se si collega la libreria come proprietà di window, sarà possibile fare riferimento a "myLibrary" senza qualificazione. Se sei curioso, questo è esattamente il modo in cui è esposta la libreria angolare .

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

Uso

Una volta aggiunto lo script, è possibile utilizzare la libreria da qualsiasi luogo - servizi, fabbriche, fornitori, regolatori, direttive ecc

<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 Biblioteca vs Servizi angolari

Il motivo per cui preferisco l'utilità funzioni di risiedere nella propria libreria piuttosto che in servizi angolari è perché li considero separati dall'ecosistema angolare. Queste funzioni di utilità sono praticamente indipendenti e indipendenti dal modulo, mentre i servizi/fabbriche angolari lavorano a stretto contatto con altre parti angolari, compresi i controller e le direttive, e sono strettamente legate al modulo.

L'estensione angolare

Se si voleva davvero, si potrebbe anche estendere la libreria angolare in sé. Basta sostituire myLibrary con angular nello script (Nota: questo potrebbe non essere consigliabile in quanto renderebbe gli script dipendenti dall'implementazione Angolare).

Answer 2

Creare un costume 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(){ 

     // ... 
    } 

    }; 
}); 

È possibile iniettare ovunque sia necessario. Se riesci a raggruppare alcuni elementi logici in servizi separati (ad esempio parseService), penso che dovresti farlo.

Se avete bisogno di qualcosa di più flessibile o configurabile, date un'occhiata ai fornitori.

Answer 3

Per estendere risposta @pixelbits', se si desidera mantenere le dipendenze esterne esplicito, si può abbastanza facilmente avvolgere librerie esistenti per l'utilizzo con angolare, come questo per momentjs:

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