$add not working using angularFire

Question

I've started playing around with AngularFire and am experiencing some challenges getting data into my Firebase app. I am using the CDN for both AngularJS and AngularFire/Firebase.

Here's the JS:

var app = angular.module('VoteTrackerApp', ['firebase']);

app.constant('FIREBASE_URI', 'https://XXXXXXXXX.firebaseio.com/');

app.controller('VoteTrackerController', ['$scope', 'VoteTrackingService', function($scope, VoteTrackingService) {
    'use strict';
    $scope.vote = { name: '', tally: 0 };
    $scope.addVotes = function() {
        VoteTrackingService.addVotes($scope.vote);
        $scope.vote = { name: '', tally: '' };
    };
}]);

app.factory('VoteTrackingService', ['$firebase', 'FIREBASE_URI', function($firebase, FIREBASE_URI) {
    'use strict';
    var ref = new Firebase(FIREBASE_URI);
    var votes = $firebase(ref);

    return {
        getVotes: function() {
            return votes;
        },
        addVotes: function(vote) {
            votes.$add(vote);
        }
    };
}]);

Here is the HTML:

<div ng-app="VoteTrackerApp">
    <div ng-controller="VoteTrackerController">
        <form ng-submit="addVotes()">
            Candidate: <input type="text" ng-model="vote.name" />
            Number of Votes: <input type="text" ng-model="vote.tally" id="tally" /> <input type="submit" value="Add" />
    </form>

    <ul>
        <li ng-repeat="(id, vote) in votes">
            {{vote.name}} has {{vote.tally}} votes
        </li>
    </ul>
</div>

My console shows this error:

TypeError: undefined is not a function
    at Object.addVotes (http://localhost:9000/scripts/main.js:24:19)
    at k.$scope.addVotes (http://localhost:9000/scripts/main.js:9:29)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:176:88
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:193:165
    at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:111:373)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:112:121)
    at HTMLFormElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:193:147)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:31:161
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:7:290)
    at HTMLFormElement.c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:31:143) 

I appreciate any insight the community can share with me. Thank you in advance. Cheers! :)

Answer 1

There is no $add method on the $firebase ref. You need to call $asArray() on it in order to get a synchronized object. Check out the quickstart for more details.

var votes = $firebase(ref).$asArray();

Furthermore, you don't need to wrap the array. You can simply return it and use the API directly:

app.factory('VoteTrackingService', ['$firebase', 'FIREBASE_URI', function($firebase, FIREBASE_URI) {
    'use strict';
    var ref = new Firebase(FIREBASE_URI);
    return  $firebase(ref).$asArray();
}]);

app.controller('VoteTrackerController', ['$scope', 'VoteTrackingService', function($scope, VoteTrackingService) {
    $scope.vote = { name: '', tally: 0 };
    var votes = VoteTrackingService;
    votes.$add($scope.vote);
}]);