AngularJS - make variable accessible to whole app

Question

AngularJS - make variable accessible to whole app

Below is a piece of code that connects with a Firebase database.

I have got a value for numberOfUsers and now I would like to use this variable in the html like so {{numberOfUsers}}.

I'm not really sure the best way to do this or if I need to use controllers also? Sorry if it's a stupid question, I'm still learning Javascript and Angular.

angular.module('myApp', ['ngRoute', 'firebase'])

  var userList = new Firebase("https://my-app.firebaseio.com/presence/");

  userList.on("value", function(snap) {
    numberOfUsers = snap.numChildren();
    console.log("Users = " + numberOfUsers);
  });

;

http://jsfiddle.net/HB7LU/11820/

Any help will be much appreciated.

Thanks

javascript
angularjs
firebase

Answer 1

The formal way to make a value available would be to put it in $rootScope, but it might be better to expose it as part of a service.

Answer 2

Try using constant

http://jsfiddle.net/HB7LU/11818/

var myApp = angular.module('myApp',[]);

    myApp.constant('numUsers', 4);

    function MyCtrl($scope,numUsers) {
        $scope.name = 'Superhero';
        $scope.numUsers = numUsers;

        $scope.addUser = function(){
            numUsers++;
            $scope.numUsers = numUsers;
        }
    }

Answer 3

You can use a constant to achieve the same as Lucas suggested it. However, instead of creating a constant service for every value you can group then together like this :

angular.module("myModule")
.constant("CONST", { "KEY1" : "VALUE1", 
    "KEY2" : "VALUE2"});

This way you can gather a bunch of constants together and use it like:

CONST.KEY1
CONST.KEY2

EDIT: Your problem seems to be very different.

First of all you should use the AngularJS flavour of Firebase. Its called AngularFire. You can find out more about it here. I will answer the question of rendering the UI based on Model changes. AngularJS promotes the MVC pattern. You need objects of Service, Controller and View (HTML page) to achieve the functionality you want.

In the example I am providing below, everything is clubbed into one file (index.html) but ideally, the code should be separated.

<div ng-app="myapp">
    <div ng-controller="PostCtrl" >
        <ul>
            <li ng-repeat="post in posts"> <!-- $scope.posts of PostCtrl" -->
                <div>
                    <span>{{post}}</span> <!-- {{}} is used to render data -->
                </div>
           </li>
       </ul>
   </div>
    <script>
        //factory is a type of service. Services are used to write business logic or fetch data from the backend. Your Firebase related calls should come here. 
        angular.module("myapp", []).factory("myService", function($http) {
         return { 
          fetchData: function() { 
        return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; //can also be a request to the backend returning data.
          }
         };
        });

         //a controller connects a service to the HTML file. $scope service provided by AngularJS is used to achieve this.
        angular.module("myapp").controller("PostCtrl", ["$scope", "myService", function($scope, myService) {
         //posts variable is used in HTML code to retrieve this data.
         $scope.posts = myService.fetchData();
        }]);
    </script>
</div>

To learn the basics of AngularJS you can go through codeschool tutorials. They are interactive and start from the basics.