How to create this global constant to be shared among controllers in Angularjs?

Question

Suppose I want to make this a variable a constant to be shared among controllers in Angularjs;

$webroot = "localhost/webroot/app"

After some investigation, it seems services are the way to do. But what is the best way? Do I use a factory, service, value or something else?

The services.js from angularjs-master-seed is below;

angular.module('myApp.services', []).value('version', '0.1');

How do I modify it to have a constant $webroot that is sharable among controllers?

Can I do the following?

angular.module('myApp.services', [])
        .value('version', '0.1')
        .constant('webroot','localhost/webroot/app');

If it is ok, how do I call it in the controller?

If you only want to share a single variable only then why do not you go for $rootScope it can be used across all controller too, its good ides to share function in services else you can go with $rootScope also, Just a thought — Vinod Louis, Mar 28 '14 at 08:43
usually you put value/constant in the main module it's quite wrong what you are doing — Whisher, Mar 28 '14 at 08:54
Using `$rootScope` is akin to using a global in vanilla javascript. It's considered a bad practice and creates a dependency to `$rootScope` from every controller and service that needs the variable. — ivarni, Mar 28 '14 at 09:13

score 4 · Answer 1 · answered Mar 28 '14 at 09:02

Whats happens when you want more constants? How about adding a config object that you can inject wherever needed. As its a single file it's also much easier to have dev.config and prod.config files that can be swapped in and out at build time.

app.factory('Config', function(){
    return{
        webRoot: "localhost/webroot/app",
        moreSettings: "abc"
    };
});

Frederik Kammer · Accepted Answer · 2014-03-28T09:10:01.603

3

If your variable have a constant value or is set once value is the right choice.
You can define it like this:

app = angular.module('myApp', []);
app.value('$webroot', 'localhost/webroot/app');

Now you can inject the service to your controller and use it:

app.controller('myController', ['$scope', '$webroot', function($scope, $webroot) {
  $scope.webroot = $webroot;
}]);

Edit #1
To fit your updated question: You can use a constant the same way as a value:

app = angular.module('myApp', []);
app.constant('$webroot', 'localhost/webroot/app');

app.controller('myController', ['$scope', '$webroot', function($scope, $webroot) {
  $scope.webroot = $webroot;
}]);

edited Mar 28 '14 at 09:10

answered Mar 28 '14 at 08:51

Frederik Kammer

3,117
3
28
29

How about using app.constant? http://stackoverflow.com/questions/13015523/angular-js-is-value-the-proper-way-to-set-app-wide-constant-and-how-to-retri – guagay_wk Mar 28 '14 at 08:54
1

`value`can only be injected into services and controllers while `constant` can also be injected into the module `config` function. If he does not need to do that I see no compelling reason to use `constant` over `value`. – ivarni Mar 28 '14 at 08:56
1

value can be edited by controller. Constant is not editable. If intention is not to be editable, then constant may be better. – guagay_wk Mar 28 '14 at 09:00
1

In that case, I *do* see a compelling reason to use `constant`. I didn't know it was mutable as a `value` (never tried changing it) – ivarni Mar 28 '14 at 09:01
I think you'll be fine with both, because they are just slight different. I prefer `value` because I can change it easly in the test suit. – Frederik Kammer Mar 28 '14 at 09:12
I have a follow-up question to your answer. http://stackoverflow.com/questions/22710593/how-to-create-a-global-object-with-properties-that-are-sharable-among-controller – guagay_wk Mar 28 '14 at 10:45

How to create this global constant to be shared among controllers in Angularjs?

2 Answers2

Linked