Need to add a child with value in Firebase using AngularJS - angularjs

I need to insert in my Firebase using AngularJS a new child with value 0.
I try to insert using this command but doesn't work:
var ref = new Firebase(FBURL);
objectname = "name";
$scope.insert= ref.child("user/"+objectname);
$scope.insert.setvalue("Arthur");
result expected
firebaseID
|-------------user
|-----name:Arthur

You're not doing it the Angular way.
https://github.com/firebase/angularfire/blob/master/docs/guide/README.md
You could use Three-way Data Bindings:
var app = angular.module("sampleApp", ["firebase"]);
// a factory to create a re-usable Profile object
// we pass in a username and get back their synchronized data as an object
app.factory("Profile", ["$firebaseObject",
function($firebaseObject) {
return function(username) {
// create a reference to the database node where we will store our data
var ref = firebase.database().ref("rooms").push();
var profileRef = ref.child(username);
// return it as a synchronized object
return $firebaseObject(profileRef);
}
}
]);
app.controller("ProfileCtrl", ["$scope", "Profile",
function($scope, Profile) {
//your object id
var objectId = '-KSe_RHPYjhkjasjjh-o6';
// create a three-way binding to our Profile as $scope.profile
Profile(objectId).$bindTo($scope, "profile");
//now simple manipulate the $scope.profile variable
$scope.profile.name = "Arthur";
}
]);

Related

Creating angular base service and sub services

I'm trying to create a general service for dynamic listing objects i angular and for different types of Objects I need slightly different methods for this service. So I thought it would be the best to have a base service and some sub-services. The problem is, that I need to initialize the base service with different Objects depending on sub-service.
So that what I got so far:
Base List-Service (shortened to the relevant)
App.factory('List', ['$q',
function (){
var List = function(Item, searchParams){
this.Item = Item;
this.searchParams = searchParams;
//....
this.nextPage();
};
//.....
List.prototype.nextPage = function () {
//.....
this.Item.find({
//.....
}.bind(this));
};
return List;
}]);
Sub-service of List-Service
App.factory('UserList', [
'User', 'List','$q',
function (User, List) {
UserList = function(){
var searchParams = {
// params Object
};
return new List(User, searchParams);
};
// extend base class:
UserList.prototype.updateUser = function(id){
//.....
}
//....
return UserList;
}]);
Currently just the UserList is loaded, but: Of course it loads every time a new instance, due the new operator when it's called, but I just want one instance. But leaving the new operator throw's an error that this.nextPage(); would be undefined function. Beside this it seems the extension function updateUser is not applied.
So what's the best practice to inherit from other service with passing arguments to parent service in angular?
I gotta work it.
changed sub service to this to inherit proper from base:
App.factory('UserList', [
'User', 'List','$q',
function (User, List) {
var UserList = function(){
var searchParams = {
//.....
};
List.call(this, User, searchParams);
};
// inherit from List service
UserList.prototype = Object.create(List.prototype);
UserList.prototype.updateUser = function(id) {
//.....
};
return UserList;
}
])
;

Reading data from firebase in angularfire

I have an app where I need to store artists and their details in database.Now I want to retrieve all the artists and render some of their details in front end.How to do that.
Secondly, if I get the artist rating in some input field by using ng-model, then how to store that value in a particular artist to update details.
The database structure is:
{
"artists": {
"Atif":{
"name":"atif",
"rating":8
},
"Himesh":{
"name":"himesh",
"rating":5
}
}
}
and this is angular.js
(function()
{
var app = angular.module("myapp", ["firebase"]);
app.controller("maincontroller", function($scope, $firebaseObject,$firebaseArray)
{
var ref = new Firebase("https://gigstart.firebaseio.com/");
var artists=ref.child("artists");
// download the data into a local object
$scope.data = $firebaseObject(ref);
// putting a console.log here won't work, see below
ref.on("value", function(snapshot)
{
console.log(snapshot.val());
}, function (errorObject)
{
console.log("The read failed: " + errorObject.code);
});
var artistsRef=new Firebase("https://gigstart.firebaseio.com//artists");
}); //end of controller
Now I want to render the name and rating of each artist in front end.Can I do something like
<div ng-repeat="artist in artists">
{{artist.name}}
{{artist.rating}}
</div>
You have a list of artists, which you want to ng-repeat over in your Angular view. You can accomplish that by:
app.controller("maincontroller", function($scope, $firebaseArray)
{
var ref = new Firebase("https://gigstart.firebaseio.com/");
var artists = ref.child("artists");
$scope.artists = new $firebaseArray(artists);
}
Please take a moment to go through the AngularFire quickstart before starting on your own project. This is covered in step 5.

angular firebase saving data as object

its my first time using angular with firebase.
I am having a hard time saving data as an object to firebase.
whenever i save a data, it doesn't provide index id or random generated id.
so first time name it saves the data and second time it overwrites the data because of not having any id.
here is my code
myApp.controller('MeetingsController', ['$scope','$firebaseObject', function ($scope, $firebaseObject) {
var ref = new Firebase('https://saddam.firebaseio.com/employees');
var obj = $firebaseObject(ref);
$scope.meetings = obj;
$scope.meetings.$loaded(function() {
console.log(obj);
});
$scope.addMeeting = function() {
obj.userinfo= {
meetingName : $scope.meetingname,
date : Firebase.ServerValue.TIMESTAMP
}
obj.$save();
}
}]);
Looking for some help

How do I get the UID of the new list item I just added to Firebase using AngularJS?

I am adding new children to a Firebase list and unique IDs are automatically created. I need some way to get the ID thats been created so I can immediately change the URL location path to a route containing that ID. Here is how I am creating the list items:
.controller('NewTestCtrl', ['$scope', 'syncData', '$location', function($scope, syncData, $location) {
$scope.newTitle = null;
$scope.tests = syncData('tests');
$scope.createTest = function() {
var newDate = new Date();
if( $scope.newTitle ) {
$scope.tests.$add({
title: $scope.newTitle,
createdDate: newDate,
modified: newDate,
user: $scope.auth.user.uid
});
$location.path("/test/" + [FIREBASE UNIQUE ID] + "/1");
}
};
}])
Thanks for your help!
The angularFire $add method returns a promise, which when resolved will contain a Firebase reference to your newly pushed value. With that value, you can get the UID.
$scope.tests.$add({
...your object....
})
.then(function(ref) {
$location.path("/test/"+ref.name());
});

AngularJS: example of two-way data binding with Resource

I have a view Transaction which has two sections
a.) view-transaction
b.) add-transaction
both are tied to the following controller
function TransactionController($scope, Category, Transaction) {
$scope.categories = Category.query(function() {
console.log('all categories - ', $scope.categories.length);
});
$scope.transactions = Transaction.query();
$scope.save = function() {
var transaction = new Transaction();
transaction.name = $scope.transaction['name'];
transaction.debit = $scope.transaction['debit'];
transaction.date = $scope.transaction['date'];
transaction.amount = $scope.transaction['amount'];
transaction.category = $scope.transaction['category'].uuid;
//noinspection JSUnresolvedFunction
transaction.$save();
$scope.transactions.push(transaction);
console.log('transaction saved successfully', transaction);
}
}
, where Transaction is a service and looks as follows
angular.module('transactionServices', ['ngResource']).factory('Transaction', function($resource) {
return $resource('/users/:userId/transactions/:transactionId', {
// todo: default user for now, change it
userId: 'bd675d42-aa9b-11e2-9d27-b88d1205c810',
transactionId: '#uuid'
});
});
When i click on tab "Transaction", the route #/transactions is activated, causing it to render both sub-views a.) and b.)
The question that I have is,
- Is there a way to update the $scope.transactions whenever I add new transaction? Since it is a resource
or I will have to manually do $scope.transactions.push(transaction);
My very first answer so take it easy on me...
You can extend the Transaction resource to update the $scope.transactions for you. It would be something like:
angular.module( ..., function($resource) {
var custom_resource = $resource('/users/:userId/transactions/:transactionId', {
...
});
custom_resource.prototype.save_and_update = function (transactions) {
var self = this;
this.$save(function () {
transactions.push(self);
});
};
return custom_resource;
});
In you controller, you would then do:
function TransactionController (...) {
...
$scope.save = function () {
...
// In place of: transaction.$save(), do:
transaction.save_and_update($scope.transactions);
...
}
}
Note: You need to make sure that object you created is fully usable in $scope. I spent 30 min trying to figure why this method failed on my code and it turn out that I am generating identity code in the database. As result, all my subsequent action on added new object failed because the new object was missing the identity!!!
There is no way to update a set of models in the scope automatically. You can push it into the $scope.transactions, or you can call a method that updates $scope.transactions with fresh data from the server. In any case, you should update the $scope in the success callback of your resource save function like this:
transaction.$save({}, function() {
$scope.transactions.push(transaction);
//or
$scope.transactions = Transaction.query();
});
In your example, when you push the transaction, you cannot be sure that the model has been saved successfully yet.
Another tip: you can create the new Transaction before you save it, and update the model directly from your view:
$scope.newTransaction = new Transaction();
$scope.addTransaction = function() {
$scope.newTransaction.save( ...
}
And somewhere in your view:
<input type="text" ng-model="newTransaction.name" />
The ng-model directive ensures that the input is bound to the name property of your newTransaction model.

Resources