Aakash Thakur Aakash Thakur - 2 months ago 22
AngularJS Question

$firebaseArray injector issue

I am working with angular and firebase and getting a problem in injecting

$firebaseArray
in the controller. Here is the code:

myApp.controller("MeetingsController",
['$scope','$rootScope','$firebaseArray',
function($scope,$firebaseArray,$rootScope){

var ref = firebase.database().ref();
var auth = firebase.auth();

auth.onAuthStateChanged(function(user) {
if (user) {
var data = firebase.database().ref('users/' + $rootScope.currentUser.$id + '/meetings');
var meetingsInfo=$firebaseArray(data);

$scope.addmeeting=function(){
meetingsInfo.$add({
name:$scope.meetingname,
date:firebase.ServerValue.TIMESTAMP
}).then(function(){
$scope.meetingname=' ';
})
};
}
});

}]);


The stack trace is attached below:

Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=%24firebaseArrayProvider%20%3C-%20%24firebaseArray%20%3C-%20MeetingsController
O/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:6:412
db/n.$injector<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:43:84
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:40:344
db/U<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:43:144
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:40:344
e@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:78
h/<.instantiate@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:445
ff/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:90:1
A/<.link@file:///E:/Ex_Files_AngularJS_DataDriven/Ex_Files_AngularJS_DataDriven/Exercise%20Files/ch01/01_02/angulardata/js/lib/angular/angular-route.min.js:7:268
bb/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:16:228
ia@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:81:35
n@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:66:176
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:58:429
aa/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:58:67
ac/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:62:428
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:59:422
l@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:63:447
x@file:///E:/Ex_Files_AngularJS_DataDriven/Ex_Files_AngularJS_DataDriven/Exercise%20Files/ch01/01_02/angulardata/js/lib/angular/angular-route.min.js:6:364
uf/this.$get</m.prototype.$broadcast@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:147:483
m/<@file:///E:/Ex_Files_AngularJS_DataDriven/Ex_Files_AngularJS_DataDriven/Exercise%20Files/ch01/01_02/angulardata/js/lib/angular/angular-route.min.js:11:408
e/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:130:409
uf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:142:165
uf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:399
l@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:97:248
D@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:101:373
fg/</w.onload@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:102:397
<main class="cf ng-scope" ng-view="">


I am following the current version of firebase. Am I doing something wrong?

Answer

The order is not correct, change it like this,

myApp.controller("MeetingsController",'$scope','$rootScope','$firebaseArray',
    function($scope,$rootScope,$firebaseArray){  

}

Also make sure you have injected 'firebase' as a dependency to your module,

var app = angular.module("sampleApp", ["firebase"]);

DEMO APP