AngularJS, RequireJS and Vanilla Javascript Functions

Question

default-functions.js

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

If I have a function - like the one above.

I don't want to add it into each controller in an AngularJS application but because I'm using RequireJS too I want the function to flow through the app without having to repeatedly add that snippet of code or any reference to that snippet on each controller.

Would there be a way to add it into the application when bootstrapped?

At the moment I have the following layout.

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

At the moment the application returns width is not defined - is there anyway I can get each function I may add into default-functions.js to get defined without adding each into each controller like you would with a Service.

Why don't you just define a service called defaultFunctions or utils so you can have all these util functions there? And then just use normal dependency injection? — Josep
– Josep, Commented Dec 10, 2014 at 15:39
@Josep I did try that but it still returns that the function is not defined. — ngplayground
– ngplayground, Commented Dec 10, 2014 at 15:50
@Josep looking and attempting to try it, will accept if it works — ngplayground
– ngplayground, Commented Dec 10, 2014 at 15:55

Josep · Accepted Answer · 2014-12-10 15:49:30Z

2

What you want to do is considered a bad practice. Having those generic functions defined in the global namespace is not a good idea and defeats the purpose of Dependency Injection. Doing that would make your code much more difficult to test and maintain.

I suggest that you create a Utils service like this:

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

And then in your controller just do this:

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

answered Dec 10, 2014 at 15:49

Josep

13.1k2 gold badges44 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ngplayground Over a year ago

Thanks, this works. I just need to take the time to redo the entire lot of functions to get this to work.

Collectives™ on Stack Overflow

AngularJS, RequireJS and Vanilla Javascript Functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related