How to bind an input to a user in firebase using corner fire?
I have created an app with firebase that can log into a user and get their id, but I cannot figure out how to enable it with a user representing a string.
See the code here: http://codepen.io/chriscruz/pen/OPPeLg
HTML Below:
<html ng-app="fluttrApp">
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
</head>
<body ng-controller="fluttrCtrl">
<button ng-click="auth.$authWithOAuthPopup('google')">Login with Google</button>
<li>Welcome, {{user.google.displayName }}</li>
<button ng-click="auth.$unauth()">Logout with Google</button>
<input ng-submit= "UpdateFirebaseWithString()" ng-model="string" ></input>
Javascript Below:
<script>
var app = angular.module("fluttrApp", ["firebase"]);
app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
var ref = new Firebase("https://crowdfluttr.firebaseio.com/");
return $firebaseAuth(ref);
}]);
app.controller("fluttrCtrl", ["$scope", "Auth", function($scope, Auth) {
$scope.auth = Auth;
$scope.user = $scope.auth.$getAuth();
$scope.UpdateFirebaseWithString = function () {
url = "https://crowdfluttr.firebaseio.com/ideas"
var ref = new Firebase(url);
var sync = $firebaseAuth(ref);
$scope.ideas = sync.$asArray();
$scope.ideas.$add({
idea: $scope.string,
userId:$scope.user.google.id,
});
};
}])
</script>
</body>
</html>
Assuming the above dependencies, below works to present the idea, but the question remains how to tie this to the user. See the codepen here: http://codepen.io/chriscruz/pen/raaENR
<body ng-controller="fluttrCtrl">
<form ng-submit="addIdea()">
<input ng-model="title">
</form>
<script>
var app = angular.module("fluttrApp", ["firebase"]);
app.controller("fluttrCtrl", function($scope, $firebase) {
var ref = new Firebase("https://crowdfluttr.firebaseio.com/ideas");
var sync = $firebase(ref);
$scope.ideas = sync.$asArray();
$scope.addIdea = function() {
$scope.ideas.$add(
{
"title": $scope.title,
}
);
$scope.title = '';
};
});
</script>
</body>
source to share
There are several things that move you.
Differences between $firebase
and $firebaseAuth
AngularFire 0.9 consists of two primary bindings: $firebaseAuth
and $firebase
. The binding $firebaseAuth
applies to all authentications. Binding $firebase
is for syncing your data to Firebase with both an object and an array.
Inside, UpdateFirebaseWithString
you call $asArray()
on $firebaseAuth
. This method belongs to the binding $firebase
.
When to call $asArray()
When you call $asArray
inside a function UpdateFirebaseWithString
, you will create a binding and sync the array every time the function is called. Instead, you should create it outside of the function so that it only creates one item.
Better yet, you can abstract the binding creation and function $asArray
into a factory.
app.factory("Ideas", ["$firebase", "Ref", function($firebase, Ref) {
var childRef = Ref.child('ideas');
return $firebase(childRef).$asArray();
}]);
Get user before calling controller
You have the right idea by getting the user from $getAuth
. This is a synchronous method, the application will block until the user is returned. Right now, you need to get a user in each controller. You can make your life easier by pulling the user into the app run
. Inside the function, run
we can inject $rootScope
both a custom Auth
factory and attach the user to $rootScope
. This way the user will be available to all controllers (unless you override it $scope.user
inside your controller).
app.run(["$rootScope", "Auth", function($rootScope, Auth) {
$rootScope.user = Auth.$getAuth();
}]);
This is a decent approach, but, as mentioned earlier, $scope.users
can be overridden. An even better way is to allow the user to route. There's a large section in the AngularFire manual about this.
Linking the user to their data
Now that the user has a user before calling the controller, we can easily associate their ID with their input.
app.controller("fluttrCtrl", ["$scope", "Ideas", function($scope, Ideas) {
$scope.ideas = Ideas;
$scope.idea = "";
$scope.UpdateFirebaseWithString = function () {
$scope.ideas.$add({
idea: $scope.idea,
userId: $scope.user.google.id,
}).then(function(ref) {
clearIdea();
});
};
function clearIdea() {
$scope.idea = "";
}
}]);
source to share