AngularJS - сделать переменную доступной для всего приложения

Question

Ниже приведен фрагмент кода, который соединяется с базой данных Firebase.

У меня есть значение для numberOfUsers, и теперь я хотел бы использовать эту переменную в html, например {{numberOfUsers}}.

Я не уверен, что это лучший способ сделать это, или мне также нужно использовать контроллеры? Извините, если это глупый вопрос, я все еще изучаю Javascript и 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/

Любая помощь будет оценена.

Благодаря

Answer 1

Вы можете использовать константы, чтобы достичь такой же, как Лукас предложил. Однако, вместо того чтобы создавать постоянную службу для каждого значения вы можете сгруппировать затем вместе, как это:

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

Таким образом, вы можете собрать кучу констант вместе и использовать его как:

CONST.KEY1 
CONST.KEY2 

EDIT: Ваша проблема кажется совсем другой.

Прежде всего, вы должны использовать Угловой аромат Firebase. Его называют AngularFire. Вы можете узнать больше об этом here. Я отвечу на вопрос о создании пользовательского интерфейса на основе изменений модели. AngularJS продвигает шаблон MVC. Для достижения требуемой функциональности вам нужны объекты Service, Controller и View (HTML-страница).

В приведенном ниже примере все включено в один файл (index.html), но в идеале код должен быть отделен.

<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> 

Чтобы узнать основы AngularJS вы можете пройти через codeschool учебники. Они интерактивны и начинаются с основ.

Answer 2

Формальный способ сделать доступное значение было бы поместить его в $ rootScope, но это могло бы быть лучше, чтобы выставить его как часть сервиса.

Answer 3

Попробуйте использовать константу

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; 
     } 
    }