Just started using firebase v3 (released roughly two weeks ago) with angularfire v2 (which according to this post fully supports firebase v3). But I am struggling to simply retrieve some data into an angular view.
Here is the controller that simply returns user array and bind it to the view. It breaks on the line using $firebaseArray and says: TypeError: Object expected
I am using AngularJs 1.5.6. Just to show the versions of firebase and angularfire I am using:
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
(function() {
var app = angular.module("FirebaseTest");
var mainCtrl = function($scope, $firebaseArray) {
var root = firebase.database().ref();
var users = root.child('users');
console.log(users); // this works fine so no problem with firebase connection
//NOTE: this doesn't work and throws exception
$scope.users = $firebaseArray(users);
}
app.controller("mainCtrl", ["$scope", mainCtrl]);
})();
try this
app.controller("mainCtrl", ["$scope", '$firebaseArray', mainCtrl]);
This should work
Related
I am working on a single page app using angularjs. The app has many navigator pages that run ajax calls.
The problem is that whenever the app launches all ajax code is run for all pages (although pages have not been navigated to yet)
I need a way to run the below only when the navigator page is requested. How can I do that without placing my code in a function and calling the function?
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
I have included the Firebase and AngularFire js files via CDN. I have injected the AngularFire into my app and thereafter injected the $firebaseArray into my controller. Yet for some reason I am still getting the 'Firebase not defined error' in my dev console.
I have looked at the following links:
AngularFire - Firebase not defined
Firebase Error - "FireBase is not defined"
Angularfire 'Firebase' is not defined
Angularfire Uncaught ReferenceError: Firebase is not defined
and none of them addresses my situation. Am I missing something? I am including my code below:
//App
angular.module("TestApp", ['ngAnimate', 'ui.router', 'ui.bootstrap', 'firebase']);
//Controller
angular.module('TestApp')
.controller('DetailsController',['$scope', '$firebaseArray', '$http', function ($scope, $firebaseArray, $http) {
console.log($firebaseArray); // <- verified here that the injection works
var rootRef = new Firebase("https://<my-ref-url>.firebaseio.com");
//load data from firebase db
$scope.loadCommunity = function(){
$scope.hasCommunity = true;
$scope.messages = $firebaseArray(rootRef);
};
}]);
and the following is the code I included in the index.html file:
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "MY API KEY HERE",
authDomain: "<my-ref-url>.firebaseapp.com",
databaseURL: "<my-ref-url>.firebaseio.com",
storageBucket: "",
};
firebase.initializeApp(config);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/2.0.1/angularfire.min.js"></script>
The problem is that you are trying to get the rootRef using new Firebase("https://<my-ref-url>.firebaseio.com"); and thats from the legacy 2.x firebase sdk.
This is one of the changes of firebase 3.x. You have to do this in a slightly different way.
var rootRef = firebase.database().ref();
You can do some tests using this jsFiddle
I'm working on a mobile app using OnsenUI for the UI, running within the Monaca / Cordova framework, using Firebase as a BaaS through the angularfire module.
I've setup the module without Firebase as follows:
var myAppController = angular.module('myApp', ['onsen.directives']);
myAppController.controller('EventListCtrl', ['$scope', function($scope) {
However, as soon as I add Firebase as a module, the app stops working.
var myAppController = angular.module('myApp', ['onsen.directives', 'firebase']);
myAppController.controller('EventListCtrl', ['$scope', '$firebase', function($scope, $firebase) {
Can you please tell me what I'm doing wrong?
Thanks
According to this link, how about trying it this way:
var myAppController = angular.module('myApp', ['onsen.directives', 'firebase']);
myAppController.controller('EventListCtrl', function($scope, $firebase) {
Thought I should answer this myself to help anyone else facing the same situation.
My issue was that the firebase js script reference was wrong., ie. I was careless.
Regards
I am a newbie to AngularJS and I'm trying to read query string key value pairs using $location.search. The following code works on Chrome, IE10 and Firefox:
var app = angular.module('myApp', []);
app.config(function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
});
app.controller('ParamController', function($scope, $location, $window) {
console.log($location.search()['term']);
});
On IE8/9 the page is immediately re-displayed with '#!' in url eg. from /demo/angularJS/index.html to /#!/demo/angularJS/index.html
Is there a way in AngularJS to read and parse querystring parms in IE8/9?
So I'm trying to use Facebook login with angularfire 0.5 and I'm having some issues.
I've simply copy-pasted the documentation code from the angularfire website but it doesn't seem to trigger a connection to Facebook.
This is my controller code:
.controller('MainCtrl', function ($scope, $firebase, $firebaseAuth) {
var ref = new Firebase('https://xlib.firebaseio.com/lunsjfeed');
$scope.auth = $firebaseAuth(ref);
});
This is the code from the view:
Login
I get no errors in the console. I can fetch and write data to firebase without any problems, but I can't the login api to work.