Global util functions in angularjs

9,369 views
Skip to first unread message

Freewind

unread,
Apr 27, 2012, 7:47:33 AM4/27/12
to ang...@googlegroups.com
I want to define some util functions like "isEmptyString"/"checkEmptyJson()" and so on.

In normal js, I will create a util.js, and put them there. 

What to do the same in angularjs? Is there any special support(or requirement) I should notice?

Johan

unread,
Apr 27, 2012, 10:29:01 PM4/27/12
to ang...@googlegroups.com
You can put it in the root scope or top level (parent) scope and other scope will inherit.

Otherwise - filter not a good option? Or a service.

wiz...@gmail.com

unread,
Oct 9, 2012, 1:12:32 AM10/9/12
to ang...@googlegroups.com
angular.module('RwsFishyTag', ['RwsFishyTag.services', 'RwsFishyTag.directives', 'RwsFishyTag.filters', 'ngResource']).
  config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider, $rootScope) {
 
    $routeProvider.when('/level/:level_id/canvases/new', {templateUrl: '/templates/canvases/new.html', controller: CanvasCreateCtrl});

    $routeProvider.when('/levels', {templateUrl: '/templates/levels/index.html', controller: LevelsCtrl});

    // $routeProvider.when('/landing', {templateUrl: 'templates/landing.html', controller: LandingCtrl});

    $routeProvider.otherwise({redirectTo: '/levels'});
    $rootScope.utils = {test: function(){}}
  }]);

Michael Alan Dorman

unread,
Oct 9, 2012, 7:17:49 AM10/9/12
to ang...@googlegroups.com
wiz...@gmail.com writes:
> angular.module('RwsFishyTag', ['RwsFishyTag.services',
> 'RwsFishyTag.directives', 'RwsFishyTag.filters', 'ngResource']).
> config(['$routeProvider', '$httpProvider', function($routeProvider,
> $httpProvider, $rootScope) {
>
> $routeProvider.when('/level/:level_id/canvases/new',
> {templateUrl: '/templates/canvases/new.html', controller:
> CanvasCreateCtrl});
>
> $routeProvider.when('/levels', {templateUrl: '/templates/levels/
> index.html', controller: LevelsCtrl});
>
> // $routeProvider.when('/landing', {templateUrl: 'templates/
> landing.html', controller: LandingCtrl});
>
> $routeProvider.otherwise({redirectTo: '/levels'});
> $rootScope.utils = {test: function(){}}
> }]);

I realize that it's what the OP asked for, but just dumping a random
bunch of stuff on the $rootScope like this seems to be missing the whole
point of Angular.js being build around a Dependency Injection system.

I believe the more "angular" way would be to segment things into
services along related functionality and use DI to make use of them
where needed:

// Code obviously untested for I am neither evil nor in posession of a
// death ray.

angular.module ('EvilUtils')
.factory ('CCUtils', function _factory () {
return {
validateCC: function () {
// Validate a CC #
}
};
})
.service ('DeathRayUtils', function _constructor () {
this.turnOnPower = function () {
// Turn on the death ray
};
this.flipTheSwitch = function (areYouCertain) {
// Rain down hot fiery death
};
});

angular.module ('EvilApp', ['EvilUtils'])
.controller ('DrEvil', ['CCUtils', 'DeathRayUtils', function (ccUtils, deathRay) {
$scope.deathRay = deathRay;
$scope.ccUtils = ccUtils;
// Implement the evil plan using the death ray unless you get
// at least $100 million in CC charges in the next 12 hours
}]);

This is taking advantage of---rather than circumventing---Dependency
Injection. As a consequence, it documents clearly what is required by
that particular controller, avoiding exactly the sort of unintended
dependencies that DI is supposed to help avoid. And if you have another
use for the CC code, you don't have to drag in all your DeathRay code at
the same time.

Cheers,

Mike.

Brian Ingles

unread,
Dec 12, 2014, 5:09:09 PM12/12/14
to ang...@googlegroups.com
It won't be truly 'global' in the static sense, but you can always register your function as a singleton into your module to be injectable into any controller.

myModule.factory('isEmptyString', function() {

   
var _isEmptyString = function(str) {
        //whatever your logic is here
   
};

   
return _isEmptyString;
});

Then you can inject your function into your controllers, services, etc like:

function SomeController($scope, isEmptyString){

     
...

     isEmptyString
(myVar);

     
...
}
Reply all
Reply to author
Forward
0 new messages