Question

默认-functions.js

function width(){
    console.log($(window).width());
}

如果我有一个功能 - 就像上面那个。

我不想将它添加到AngularJS应用程序中的每个控制器中，但因为我也在使用RequireJS，我希望该函数能够流经应用程序而无需重复添加该代码片段或对该代码段的任何引用在每个控制器上。

引导时是否有办法将其添加到应用程序中？

目前我有以下布局。

main.js

requirejs([ 'vendors/jquery.min',
        'angular',
        'app',
        'routes',
        'ui-bootstrap',
        'default-functions',
        'services/services',
        'directives/directives',
        'filters/filters',
        'controllers/controllers'
       ], function ($, angular, app, _) {
           angular.element(document).ready(function () {
               angular.bootstrap(document, ['App']);
               document.getElementsByTagName('html')[0].dataset.ngApp = 'App';
           });

       });

controller.js

define([], function() {

    var Ctrl = function( $scope, $timeout, $http, $routeParams, $rootScope) {
        width();
    }
    return Ctrl
});

当应用程序返回width is not defined时 - 无论如何，我可以将我可以添加到 default-functions.js 中的每个函数进行定义，而无需将每个函数添加到每个控制器中，就像您一样将使用服务。

Answer 1

你想做的事情被认为是一种不好的做法。在全局命名空间中定义这些泛型函数并不是一个好主意，并且会破坏依赖注入的目的。这样做会使您的代码更难以测试和维护。

我建议您创建一个Utils服务，如下所示：

app.service('utils', function(){
 return {
    width: function(){ /*do something here*/ },
    anotherUtilFunction:  function(){ /* do something else here*/ }
    /*as many more functions as you want here*/
 };
})

然后在您的控制器中执行此操作：

var Ctrl = function( $scope, $timeout, $http, $routeParams, $rootScope, utils) {
    utils.width();
    utils.anotherUtilFunction();
}

AngularJS，RequireJS和Vanilla Javascript函数

1 个答案: