Где выполняются угловые вспомогательные функции?

Question

Я пытаюсь сократить повторение кода с помощью моих директив. Я хотел бы написать вспомогательную функцию, которая генерирует директивы вместо их определения вручную. Изменение определения директивы к чему-то вроде:

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

Я не уверен, где это должно пойти (другой тогда висит его окно). Угловые обеспечивают место для этих методов?

Answer 1

Угловое не предоставляет ничего, но использует angular как пространство имен для собственных вспомогательных функций. Вы можете просто сделать то же самое:

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

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

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

И в ваших директивах:

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

Answer 2

Вы можете либо делать то, что говорит о @JB Nizet или, если вам не нравится идея обнажая что-то вроде myApp к глобальную область, вы просто помещаете функцию где-то, а затем завершаете все в закрытии как шаг сборки.

Файл: directiveHelpers.js

function myDirectiveBuilder(){ 
} 

Файл: someDirective.js

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

Тогда как шаг сборки вы Concat все файлы и в качестве заключительного этапа сборки вы поставите закрытие вокруг него, поэтому оно по существу становится:

Файл: app.js

(function(){ 

    function myDirectiveBuilder(){ 
    } 

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

Этот метод используется сам угловому по всей базе кода.

Answer 3

Еще один способ сделать это - приложить к объекту root объект UTIL, содержащий ваши вспомогательные функции. Это захватывается 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... 

}; 

} 

И тогда вы можете вызвать функции помощника, как;

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

Фрагменты для сообщения AngularJS4U (ссылка выше).

Answer 4

Я против применения этих утилов в глобальном масштабе, что является очень плохой практикой. Один из вариантов, который я счел разумным, - использовать службу для объявления этих utils, а затем использовать их как необходимые зависимости. Это похоже на библиотеки импорта по мере необходимости без загрязнения глобальной области.

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

Использование:

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

Об этом говорят Мэтт Путь здесь: Where is a good place to put a few small utility functions in AngularJS?

Answer 5

Вот простые, компактные и легкие для понимания метод я использую.
Сначала добавьте службу в свои js, которые будут предназначены для получения ваших вспомогательных функций.

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; 

    }]); 

Затем в контроллере, вводят свой вспомогательный объект и использовать любые доступные функции с чем-то вроде следующего:

app.controller('MainCtrl', [ 

'$scope', 
'Helpers', 

function($scope, Helpers){ 

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

}]);