AngularJS: How do you create app wide variable that updates itself

Question

I am working on a small game/simulation app and I need an app-wide time variable that updates itself. It could just as well be a number variable that keeps increasing for all I care, e.g. 0..1..2..3..4 every second to represent time progress within this simulation app. (this doesn't have to be JavaScript Date Object per se)

I want it to be accessable in every controller/service I inject it into and to automatically update in the whole app. Other scope variables that depend on this time variable would then automatically update with all the two-way-binding goodies that AngularJS presents.

Is this even a 'legal' line of though within AngularJS app dev philosophy? If it is, what would be the best way how to construct it?

Sounds like setting a cookie might be your best bet – Wex Aug 24 '13 at 19:18 — Wex, Aug 24 '13 at 19:18

Christoph · Accepted Answer · 2013-08-24T20:20:34.713

You could either build a special services for that which can be injected everywhere where it is needed or you just put it on $rootScope. Normally you should avoid putting things on the $rootScope as global state is often a code smell. However, if that's really what you need in your case, then this might suite your needs.

You can simply put that code on a run block so it get's executed as soon as the module is loaded.

myModule.run(['$rootScope', function($rootScope){
    setInterval(function(){
        $rootScope.now = new Date().getTime();
    }, 1000)
}]}

Be aware that in the fashion I wrote the code above, Angular won't be notified about that change. However, notifying Angular every second about that change might not be what your want as it could lead to serious performance problems. Just to clarify things: If you do want Angular to be notified about the change and update all bindings, then the variable update would need to be wrapped in a $apply call.

myModule.run(['$rootScope', function($rootScope){
    setInterval(function(){
        $rootScope.$apply(function(){
            $rootScope.now = new Date().getTime();
        });
    }, 1000)
}]}

Also be aware that most of the time you want to avoid setInterval as the time between the processing can be non deterministic. Most of the time setTimeout is better suited. It's out of the scope of this answer to dive into that but if you want to read up on that topic I recommend reading John Resig's post on the topic: http://ejohn.org/blog/how-javascript-timers-work/

score 0 · Answer 2 · answered Aug 24 '13 at 19:34

0

When i understand your question right you search for $rootScope. In each Controller/Directive/Service where you include the rootScope you can globally throw stuff.

Click here for the awesome AngularJS-Docu ;)

answered Aug 24 '13 at 19:34

Michael J. Zoidl

1,708
16
13

Alright, so that's where you store the value, but where would you construct the feature that it updates and increases every second? – Harijs Deksnis Aug 24 '13 at 19:46

score 0 · Answer 3 · edited May 23 '17 at 11:44

0

Use of $rootScope for global variables is a code smell that should be avoided, if possible.

A better solution is using a factory/service, which you can inject into whatever components that need it.

See https://stackoverflow.com/a/18882147/2596608 for more details

edited May 23 '17 at 11:44

Community

1
1

answered Sep 18 '15 at 20:32

punkrockpolly

9,270
6
36
37

AngularJS: How do you create app wide variable that updates itself

3 Answers3