Trying to use AngularFire for a simple Angular polling test app to store basic objects. I've tried injecting $firebase (which logs an error advising me this is deprecated in favor of $firebaseObject and $fireBaseArray). Injecting either of these results in same issue unchanging.
I've searched around, but most posts I've found refer to bower.json syntax errors or something specific to JShint. It does not appear to be either of these for me.
Error message
ReferenceError: Firebase is not defined
Points to line with...
new Firebase(...)
Here's my app code:
angular.module('angPoll', ['ui.router', 'firebase']).
config(...).
controller('pollsController', function($scope, pollsData) {
$scope.pollsList = pollsData.getPolls();
}).
service('pollsData', function($firebaseObject){
console.log($firebaseObject); <-- [verified here that the injection works]
var fireRef = new Firebase('https://<my-ref-url>.firebaseio-demo.com/');
var pollsRef, polls;
pollsRef = $firebaseObject(fireRef.child('polls')).$asArray();
this.clearPolls = clearPolls;
this.setInitialPolls = setInitialPolls;
this.getPolls = getPolls;
myDataRef.set({});
function clearPolls() {
pollsRef.set({});
}
function getPolls() {
pollsRef.on("value", function(snapshot){
console.log(snapshot.val());
polls = snapshot.val();
return polls;
})
}
function setInitialPolls() {
pollsRef.set({
one: {
name: "fantastic poll"
},
two: {
name: "mediocre poll"
}
});
}
setInitialPolls();
});
My research on this issue already:
Firebase, AngularFire Error: Module firebase is not available <-- not my issue, as I've verified with a console.log() that $firebaseObject is being properly injected into the service
Angularfire 'Firebase' is not defined <-- Firebase being defined does not appear to rely on this, especially since this is a method call I'm attempting to initialize the ref
https://github.com/firebase/angularfire/issues/362 <-- for some reason they closed this GH issue attributing it solely to a bower.json syntax error, which I'm pretty sure is not the case for me
I've also seen posts about this breaking for JShint but not in the app itself. My issue is int he functionality of the app itself.
My bower.json in case that ends up mattering:
{
"name": "MyPoll",
"version": "0.0.0",
"authors": [
"thedig"
],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular": "~1.3.14",
"angular-ui-router": "~0.2.13",
"angular-local-storage": "~0.1.5",
"bootstrap": "~3.3.2",
"restangular": "~1.4.0",
"angularfire": "~1.0.0"
}
}
Angularfire included in index.htm:
<head>
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script type="text/javascript" src="../bower_components/restangular/dist/restangular.js"></script>
<script type="text/javascript" src="../bower_components/lodash/dist/lodash.js"></script>
<script type="text/javascript" src="../bower_components/angularfire/dist/angularfire.js"></script>
<script type="text/javascript" src="MyPoll.js"></script>
</head>
Realized I needed -both- AngularFire and Firebase included. Firebase is now recognized as a global variable.
...
<script type="text/javascript" src="../bower_components/firebase/firebase.js"></script>
<script type="text/javascript" src="../bower_components/angularfire/dist/angularfire.js"></script>
...