CODEWITHSUNDEEP
angularjsangularfire
Newbee
Newbee

Reputation: 817

"undefined is not a function" error using angularFire

i am trying to display data from firebase and i have below code. I already declared firebase dependency for my app.

.controller('AdvMainCtrl', ['$scope', 'dataLoad', 

    function($scope, dataLoad, $route, $routeParams, $location, $resource, angularFire) {
        var categoryPromise = dataLoad.loadCategories($scope, 'categories'),
        tmPromise = dataLoad.loadTransportationMode($scope, 'tModes'),
        tourPromise = dataLoad.loadAdventures($scope, 'tours');
        categoryPromise.then(function() {
            console.log('data loaded');
        });

        $scope.$watch('category', function() {
            if (typeof $scope.category === 'undefined') return;
            console.log('category changed');
            console.log($scope.category.name);
        });
        $scope.$watch('tMode', function() {
            if (typeof $scope.tMode === 'undefined') return;
            console.log('tm changed');
            //console.log($scope.transportationMode.name);
        });
    var ref = new Firebase("https://wpladv.firebaseio.com/adventure");
    $scope.tours = [];
    angularFire(ref, $scope, "tours");
    }
])

in the console i see the error occurring at angularFire(ref, $scope, "tours"); statement. I am not sure how to fix this.

the entire code in my controller is 

.controller('AdvMainCtrl', ['$scope', 'dataLoad',
        function($scope, dataLoad, $route, $routeParams, $location, $resource, angularFire) {
            var categoryPromise = dataLoad.loadCategories($scope, 'categories'),
            tmPromise = dataLoad.loadTransportationMode($scope, 'tModes'),
            tourPromise = dataLoad.loadAdventures($scope, 'tours');
            categoryPromise.then(function() {
                console.log('data loaded');
            });

            $scope.$watch('category', function() {
                if (typeof $scope.category === 'undefined') return;
                console.log('category changed');
                console.log($scope.category.name);
            });
            $scope.$watch('tMode', function() {
                if (typeof $scope.tMode === 'undefined') return;
                console.log('tm changed');
                //console.log($scope.transportationMode.name);
            });
        var ref = new Firebase("https://wpladv.firebaseio.com/adventure");
        $scope.tours = [];
        angularFire(ref, $scope, "tours");
        }
    ])

the error is showing at "var categoryPromise = dataLoad.loadCategories($scope, 'categories')," statement

i have the following code in my api js file.

angular.module('localAdventuresApp')
    .factory('dataLoad', ['angularFire',
        function(angularFire) {
            var dbUrl = 'https://wpladv.firebaseio.com/';

            return {
                loadCategories: function(scope, items) {
                    var cat = '/category';
                    return angularFire(dbUrl + cat, scope, items, []);
                },
                loadTransportationMode: function(scope, items) {
                    var cat = '/transportMode';
                    return angularFire(dbUrl + cat, scope, items, []);
                },
                loadAdventures: function(scope, items) {
                    var cat = '/adventures';
                    return angularFire(dbUrl + cat, scope, items, {});
                }
            }
        }
    ])

the error is being displayed in the "return angularFire(dbUrl + cat, scope, items, []);" statement here. The error which i am seeing in my console is "Error: Please provide a Firebase reference instead of a URL, eg: new Firebase(url)".

Upvotes: 3

Views: 2344

Answers (2)

Newbee
Newbee

Reputation: 817

the error "Please provide a Firebase reference instead of a URL, eg: new Firebase(url)" was occuring because i had angularfire version > 0.3.0. All i had to do was to change dbUrl + cat to new Firebase(dbUrl + cat). That fixed the issue. Thank you all for your valuable suggestions.

code after change

angular.module('localAdventuresApp')
    .factory('dataLoad', ['angularFire',
        function(angularFire) {
            var dbUrl = 'https://wpladv.firebaseio.com';

            return {
                loadCategories: function(scope, items) {
                    var cat = '/category';
                    console.log(dbUrl);
                    var ref = new Firebase(dbUrl + cat);
                    return angularFire(ref, scope, items, []);
                },
                loadTransportationMode: function(scope, items) {
                    var cat = '/transportMode';
                    var ref = new Firebase(dbUrl + cat);
                    return angularFire(ref, scope, items, []);
                },
                loadAdventures: function(scope, items) {
                    var cat = '/adventure';
                    var ref = new Firebase(dbUrl + cat);
                    return angularFire(ref, scope, items, {});
                }
            }
        }
    ])

Upvotes: 2

Lucius
Lucius

Reputation: 2882

you need to inject the dependencies to your controller

.controller('AdvMainCtrl', ['$scope', 'dataLoad', '$route', '$routeParams', '$location', '$resource', 'angularFire',
    function($scope, dataLoad, $route, $routeParams, $location, $resource, angularFire) {
        // your code here
    }
])

Upvotes: 3

Related Questions