Dove vanno le funzioni di aiuto angolare?

Question

Sto cercando di ridurre la ripetizione del codice con le mie direttive. Vorrei scrivere una funzione di supporto che generi le direttive invece di definirle manualmente. Cambiare la definizione direttiva a qualcosa di simile:

mydirectiveBuilder(function myButton(){ 
    return { 
    scope: { 
     toggle: "@pressed" 
    } 
    }; 
}); 

non sono sicuro dove questo dovrebbe andare (altri poi appeso fuori della finestra). L'angolare fornisce un posto per questo tipo di metodi?

Answer 1

Angular non fornisce nulla, ma utilizza angular come spazio dei nomi per le proprie funzioni di supporto. Si potrebbe semplicemente fare lo stesso:

var myApp = (function() { 
    // private function, not visible from the outside 
    function privateFunction() { 
     ... 
    } 

    function mydirectiveBuilder() { 
     ... 
     // you can use privateFunction here 
    } 

    return { 
     mydirectiveBuilder: mydirectiveBuilder; 
    }; 
})(); 

e nelle vostre direttive:

myApp.mydirectiveBuilder(function myButton(){ 
    return { 
     scope: { 
      toggle: "@pressed" 
     } 
    }; 
}); 

Answer 2

Si potrebbe o fare quello @JB Nizet suggerisca o se non ti piace l'idea di esporre qualcosa di simile a myApp l'ambito globale, basta mettere la funzione da qualche parte e poi avvolgere tutto in una chiusura come fase di costruzione.

file: directiveHelpers.js

function myDirectiveBuilder(){ 
} 

File: someDirective.js

myDirectiveBuilder(function myButton(){ 
    return { 
     scope: { 
      toggle: "@pressed" 
     } 
    }; 
}); 

Poi, come un passaggio di generazione si concat tutti i file e come un passo build finale si mette un chiusura intorno ad esso in modo essenzialmente diventa:

File: app.js

(function(){ 

    function myDirectiveBuilder(){ 
    } 

    myDirectiveBuilder(function myButton(){ 
     return { 
      scope: { 
       toggle: "@pressed" 
      } 
     }; 
    }); 
})(); 

Questa tecnica è usata da angolare sé tutta la base di codice.

Answer 3

Un altro modo per procedere è quello di allegare all'oggetto radice un oggetto UTIL contenente le funzioni di supporto. Questo è catturato in this tutorial

angular.module("app", ["ngResource", "ngRoute"]).run(function($rootScope) { 

    //app util functions 
    $rootScope.UTIL = { 

    toFilename: function(filename) { 
    return filename 
     .toLowerCase() 
     .replace(/ /g,'-') 
     .replace(/[^\w-]+/g,''); 
    }, 

    fromFilename: function(filename) { 
    return filename 
     .toLowerCase() 
     .replace(/[^\w ]+/g,'') 
     .replace(/ +/g,'-'); 
    } 

    //etc more functions here... 

}; 

} 

e quindi è possibile chiamare le funzioni di supporto come;

$scope.UTIL.toFilename(filename); 
$scope.UTIL.fromFilename(filename); 
etc... 

I frammenti vengono accreditati sul post di AngularJS4U (link sopra).

Answer 4

Sono contrario a mettere questi programmi di utilità in ambito globale, che è una pessima pratica. Un'opzione che ho trovato ragionevole è utilizzare il servizio per dichiarare questi programmi di utilità e quindi utilizzarli per iniettarli come dipendenze secondo necessità. Questo è simile alle librerie di importazione in base alle necessità senza un ambito globale inquinante.

angular. 
    module('phonecatApp'). 
    factory('strHelpers', [ 
    function() { 
     return { 
     snippingStr: function(str) { 
      return str.substring(1,20) + "..."; 
     } 
     } 
    }]) 

Usage:

function usage(strHelpers) { 
    console.info("Demonstrating console.log and helper function: " + 
    strHelpers.snippingStr("111111111122222222223333333333")); 
} 

Ciò è suggerito da Matt Way qui: Where is a good place to put a few small utility functions in AngularJS?

Answer 5

Ecco un metodo semplice, compatto e facile da capire che uso.
Innanzitutto, aggiungi un servizio nel tuo js che sarà dedicato a ricevere le tue funzioni di supporto.

app.factory('Helpers', [ function() { 
     // Helper service body 

     var o = { 
     Helpers: [] 

     }; 

     // Dummy function with parameter being passed 
     o.getFooBar = function(para) { 

      var valueIneed = para + " " + "World!"; 

      return valueIneed; 

      }; 

     // Other helper functions can be added here ... 

     // And we return the helper object ... 
     return o; 

    }]); 

Poi, nel controller, iniettare l'oggetto di supporto e utilizzare qualsiasi funzione disponibile con qualcosa di simile a quanto segue:

app.controller('MainCtrl', [ 

'$scope', 
'Helpers', 

function($scope, Helpers){ 

    $scope.sayIt = Helpers.getFooBar("Hello"); 
    console.log($scope.sayIt); 

}]);