AngularJS – can you rename a service without modifying its core source?

All we need is an easy explanation of the problem, so here it is.

I have a situation where I’ve downloaded a written service for angular.js, and it works fine – but I would prefer to have it called something different in my code just for the convenience and readability. It isn’t really a requirement, just a desire.

I could go through and change this in the actual source code for the service, but that’s obviously going to lead to all kinds of problems. So I was wondering, is this kind of thing possible? Can you ‘alias’ a service across your application so that it can be referred to something differently when you’re passing it through controllers? For example…

normal

var app = angular.module('demo', [ 'ngSomethingLongAndObtuseThatIsNotNecessary' ]);

app.controller('HomeController', function(ngSomethingLongAndObtuseThatIsNotNecessary){
   ngSomethingLongAndObtuseThatIsNotNecessary.open();
});

goal

var app = angular.module('demo', [ 'ngSomethingLongAndObtuseThatIsNotNecessary' ]);
var smallerName = ngSomethingLongAndObtuseThatIsNotNecessary;

app.controller('HomeController', function(smallerName){
   smallerName.open();
});

I tried just doing that, assigning it to another variable, but it didn’t work.

Update

I actually did make something work, but I’m not sure if this will have bad repercussions down the line.

var app = angular.module('demo', [ 'ngSomethingLongAndObtuseThatIsNotNecessary' ]);

app.service('ngSmaller', function(ngSomethingLongAndObtuseThatIsNotNecessary) {
   return ngSomethingLongAndObtuseThatIsNotNecessary;
});

app.controller('HomeController', function(ngSmaller){
   ngSmaller.open();
});

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You can inject it like that, this way the services names as strings in array will be resolved to the name of attributes in function, ORDER is important

app.controller('HomeController', ['ngSomethingLongAndObtuseThatIsNotNecessary', function(shortName){
   shortName.open();
}]);

—edit —–

or with injector

var injector = angular.injector(['demo', 'ng']);
var shortName = injector.get('ngSomethingLongAndObtuseThatIsNotNecessary');

app.controller('HomeController', function(shortName){
  shortName.open();
});

Method 2

You can redefine the service with an alias name and then use it everywhere in the application. It will even keep the same one instance even if you use the long name:

app.service("shortName", ["ngSomethingLongAndObtuseThatIsNotNecessary", function (originalService) { return originalService; }]);

app.controller("HomeController", ["shortName", function(service) {
   service.open();
}]);

Similarly you can alias whole modules:

angular.module("shortModuleName", ["veryVeryLoooooooooooooooooooongModuleName"]);

Method 3

Another approach can be just create a new factory with a smaller name but use functionality of the existing service. Possibly can help in achieving what you want without polluting the global namespace.

angular.module('myApp').factory('simpleService',['IHaveAVeryLongOrConfusingName', function(foo){
  return foo;
}])

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply