We Keep Coding

Getting value from a firebase object using angularJS in a controller

I am trying to access user data in a controller via a service. The service returns the object correctly
{
"$id": "9ecadf8e-a233-48ac-bebf-26b50ea2855d",
"$priority": null,
"branch": "London",
"email": "manager#london.co.uk",
"firstName": "John",
"lastLogin": 1467975594697,
"lastLoginPrevious": 1467975348837,
"lastName": "Smith",
"role": "Manager"
}
when accessing the data from the controller I can access the $id successfully by using
$scope.userData = UserService.getUserData();
console.log($scope.userData.$id)
but when trying to access any other node such as role
$scope.userData = UserService.getUserData();
console.log($scope.userData.role)
I just get 'undefined' in the console. Obviously I am not doing this correctly but stuck on what I should try next.
Here is my service that retrieves the data from firebase
.service('UserService', ['$location', '$firebaseAuth','$firebaseObject', function ($location, $firebaseAuth, $firebaseObject) {
var userData = '';
var ref = new Firebase("https://firebase-url");
var authData = ref.getAuth();
var userUID = authData.uid;
var userRef = new Firebase("https://firebase-url/Users/" + userUID);
var userData1 = $firebaseObject(userRef);
return {
getUserData: function () {
if (userData == '') {
userData = userData1;
}
return userData;
},
};

You could possibly be having an asynchronous issue. Here is an example of my code in a controller (Firebase 3.0):
// Gets reference to resources tree, SERVICE CALL
$scope.resourceNames = submissions.getResourceNames();
// Could be previously loaded, check
if(Object.keys($scope.resourceNames).length === 0 && $scope.resourceNames.constructor === Object) {
// Get reference
var resourceNameRef = firebase.database().ref("/resourceNames");
firebase.database().goOnline();
// Return JSON object of data at specified location
$scope.resourceNames = $firebaseObject(resourceNameRef);
// When resources loaded
$scope.resourceNames.$loaded().then(function(data) {
// Store into service, SERVICE CALL
submissions.setResourceNames(data);
// DO WHATEVER
}).catch(function(error) {
console.error("Error:", error);
});
} else {
// WAS ALREADY LOADED
}
What I have done is check the service to see if the data has already been loaded (by another controller) and if it wasn't I call the data, wait for it to be loaded and then store it inside my service.
I can then use the data as I please inside the controller or in the view:
<p>
{{resourceNames.$id}}
</p>
<p>
{{resourceNames.name}}
</p>
<!-- etc -->

js-cookie: Cookies.get('cookieName') returns undefined

I'm using this library for a JQuery plugin I'm coding... I save inside a cookie a specific data created by the user in this way:
// Update cookies checks if the cookie esists.
// If cookie exists => push data {myData:[obj1[, obj2, [...], objN]]}
// If cookie doesn't exists => create cookie with {myData:[obj1]}
function _updateCookie(name, cookie, data) {
// Check if cookie exists
var cookies = {myData:[]};
// _getCookie(name) { return Cookies.get(name) }
if (_getCookie(name) != undefined) {
cookies = _getCookie(name);
}
cookies.reminders.push(cookie);
Cookies.set(name, cookies, data);
}
DATA:
var data = {
expires: 1,
path: '/',
domain: '',
secure: true
}
COOKIE:
var cookie = {
myData: [
1: myObject1,
2: myObject2,
// [...]
n: myObjectN
],
}
When I call _getCookie(name) it always returns undefined. I've also tried to list the cookies with:
console.log(Cookies.get());
// log: Object {_ga: "GA1.1.402426237.1450622600"}
But if i look at chrome://settings/cookies i see:
2 cookies on localhost [_ga], [myCookie]
Any suggestion of what am I doing wrong?
EDIT
I saw that the problem comes out when i call Cookie.set(); with this values
Cookies.set('myCookie', {[expires: ...], path: '', domain: ''});
if I call
Cookies.set('myCookie'{[expires: ...]});
I can get the cookie with no problems.

Properly retrieve username and useful values (site title, copyright, etc.)

I have a simple web app based on this project ( https://github.com/arthurkao/angular-drywall ), running with NodeJS and AngularJS as the front-end.
I'm trying to set up a simple page that displays a list of all connected users on a map (using Google Maps, Geolocation and PubNub).
Here's how I'm actually doing it:
angular.module('base').controller('TravelCtrl',
function($rootScope, $scope, NgMap, security, $geolocation, PubNub){
$rootScope.extusers = []; //remote users
$scope.initTravel = function() { //declare the init function
PubNub.init({
subscribe_key: $rootScope.security.keys.psk,
publish_key: $rootScope.security.keys.ppk,
uuid: $rootScope.security.currentUser.username,
ssl: true
});
PubNub.ngSubscribe({
channel: "travel",
state: {
position: {},
}
});
console.log("Loaded Travel");
$geolocation.getCurrentPosition({
timeout: 60000
}).then(function(position) { //when location is retreived
$scope.position = position;
PubNub.ngSubscribe({
channel: "travel",
state: {
position: {
lat: Math.floor($scope.position.coords.latitude*1000)/1000, //decrease accuracy
long: Math.floor($scope.position.coords.longitude*1000)/1000,
},
}
});
$rootScope.$on(PubNub.ngPrsEv("travel"), function(event, payload) {
$scope.$apply(function() {
$scope.extusers = PubNub.ngPresenceData("travel");
});
});
PubNub.ngHereNow({ channel: "travel" });
$scope.showInfo = function(evt, marker) { //show user window on map
$scope.extuser = marker;
$scope.showInfoWindow('infoWindow');
};
});
};
if ($rootScope.hasLoaded()) { //if username and keys are already loaded, then init module
$scope.initTravel();
} else { //else, wait for username and keys to be loaded
$rootScope.$on('info-loaded', function(event, args) {
$scope.initTravel();
});
}
}
);
Although it works, it seems like it's very buggy and only loads sometimes. Occasionally, I get this:
Result screenshot
I really don't know what I'm doing wrong, as I simply followed the tutorials on PubNub's AngularJS SDK.
I think this has to do with how I'm initialising the application.
angular.module('app').run(['$location', '$rootScope', 'security', function($location, $rootScope, security) {
// Get the current user when the application starts
// (in case they are still logged in from a previous session)
$rootScope.hasLoaded = function() {
return (security.keys && security.info && security.currentUser); //check if everything is loaded correctly
};
$rootScope.checkLoading = function() {
if ($rootScope.hasLoaded()) {
$rootScope.$broadcast('info-loaded'); //broadcast event to "TravelCtrl" in order to init the module
}
};
security.requestKeys().then($rootScope.checkLoading); //request secret keys
security.requestSiteInfo().then($rootScope.checkLoading); //then templating info (site title, copyright, etc.)
security.requestCurrentUser().then($rootScope.checkLoading); //and finally, current user (name, id, etc.)
$rootScope.security = security;
// add a listener to $routeChangeSuccess
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route && current.$$route.title? current.$$route.title: 'Default title';
});
}]);
1- Request secret keys, site info and current user with JSON API.
2- Wait until everything's loaded then init the application with the appropriate keys (PubNub, Google Maps)
--
My question is:
How do you instantiate an AngularJS app after retrieving useful information via a RESTful API?
I'm pretty new to AngularJS, and I wouldn't be surprised if my approach is totally ridiculous, but I really need to get some advice on this.
Thanks in advance for your help,
Ulysse

You don't have to wait that the AJAX Query ended to initate the angular APPs.
you can use the $http promise ( details her )
In the controller :
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
// data is now accessible in the html
$scope.data = response ;
// you can call a function to add markers on your maps with the received data
addMarkerOnMap(response);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
You can also add a watch on some variable to wait modification on them :
// you should have $scope.yourVarName declared.
$scope.$watch('yourVarName', function(newValue, oldValue) {
console.log(newValue);
});
Or watch a list/object
$scope.$watchCollection('[var1,var2]', function () {
},true);

Can't Persist New User to Firebase Database

I've been reading countless tutorials and I'm not able to get any data to appear in the firebase database at all. I'm trying to get this structure
"my-app-name": {
"users": {
"uid-of-user": {
"email": "them#them.com",
"todoitems": {
}
}
}
}
First of all I'm not sure how to acquire that structure. Under "my-app-name" in the visual editor, I've put "users" = "". I'm not sure if that's the way to star establishing users as an empty object. Or maybe I shouldn't be dealing with the visual editor at all? Here's my createNewUser controller that should be persisting new users to the database:
function LoginController($scope, Auth, $state, $location, $firebaseObject, $firebase) {
$scope.createNewUser = createNewUser;
$scope.signupComplete = "";
function createNewUser() {
var ref = new Firebase("https://sizzling-torch-655.firebaseio.com/");
//CREATE USER
Auth.$createUser({
email: $scope.email,
password: $scope.password
}).then(function(userData) {
//THIS SHOULD BE PERSISTING IT TO THE DATABASE
var user = $firebaseObject(ref.child('users').child(userData.uid));
user.$loaded().then(function() {
var newUser = {
emailAddress: $scope.email,
};
user.$ref.$set(newUser);
})
// $location.path("/home");
}).catch(function(error) {
$scope.responseMessage = error;
});
};
};
It should be noted I haven't created the users object yet in the firebase database. Any help is extremely appreciated. Thank you very much.
Clarification
Auth.$creatUser is:
app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
return $firebaseAuth(ref);
}]);
I've successfully created users and see them appear in the Login/Users tab of the Firebase dashboard. I'm not able to store them into the database though.
And userData.uid is the userData object that was returned from the then part of the $createUser function.
EDIT 2
These are my security and rules. Could this be affecting me writing user data to the database?
This is going to be a todo app. Users should be able to only have access to their own data.
{
"rules": {
// public read access
".read": true,
"users": {
"$uid": {
".write": "$uid === auth.uid"
}
}
}
}

Firebase Authentication does not automatically store user information in the database. If you want to store such information in the database, you will have to write the necessary code for that yourself.
From your snippet:
//THIS SHOULD BE PERSISTING IT TO THE DATABASE
var user = $firebaseObject(ref.child('users').child(userData.uid));
This code does not store any information in the database either. Instead it tries to read the user's data from the database. But since you didn't write it there in the first place, the read will accomplish nothing and the then() will never execute.
The solution is to write the necessary user data into the database, when the user authenticates.
var user = $firebaseObject(ref.child('users').child(userData.uid));
var newUser = {
emailAddress: $scope.email,
};
user.$ref.$set(newUser);

Angular refresh kills user session

I have a problem with my angular app- after a user signs in, if he hits the refresh button, the signin info is lost and the app redirects to the log in page. I found a SO answer for something similar here using $cookieStore but I don't think it can work for me as I'm not using cookies. Can anyone suggest a solution? Here's my authorization service-
var app = angular.module('myApp.services');
app.factory('SignIn', ['$resource', '$q', function($resource, $q) {
var signInUrl = 'https://example.com'
var API = $resource(signInUrl, {}, {
signIn: {
withCredentials: true,
url: signInUrl + '/session',
method: 'POST'
},
signOut: {
url: authApiUrl + '/session',
method: 'DELETE'
},
currentUser: {
url: signInUrl + '/users/#me',
method: 'GET'
}
});
var _currentUser = undefined;
return {
isAuthenticated: function() {
return !!_currentUser;
},
getUser: function(){
var d = $q.defer();
// If _currentUser is undefined then we should get current user
if (_currentUser === undefined) {
API.currentUser(function(userData) {
_currentUser = userData;
d.resolve(userData);
}, function(response) {
if (response.statusCode === 401) {
_currentUser = null;
d.resolve(_currentUser);
} else {
d.reject(response);
}
});
} else {
d.resolve(_currentUser);
}
return d.promise;
},
signIn: function(username, password){
var d = $q.defer();
API.signIn({email: username, password: password}, function(data, headers){
_currentUser = data;
d.resolve(_currentUser);
}, d.reject);
return d.promise;
},
signOut: function(){
var d = $q.defer();
API.signOut(function(){
_currentUser = null;
d.resolve();
}, d.reject);
return d.promise;
}
};
}]);

If you just need to keep track of the _currentUser data past a refresh then you could use sessionStorage within the browser. That extends all the way back to IE 8 and we really shouldn't be supporting any browsers before that anyway.
Usually these things are done with cookies though. When the client first makes a connection to the server (even before the first API call in some cases) a cookie is sent to the client so the server can maintain a session associated with that particular client. That's because the cookie is automatically sent back to the server with each request and the server can check its local session and say, "Oh, I'm talking to this user. Now I can use that additional piece of context to know if I can satisfy their API call or not."
You don't show any of your other API calls here but I'm guessing that you're sending something out of the _currentUser with each API call to identify the user instead? If so, that certainly works, and it avoids the need to synchronize cookies across multiple servers if you're clustering servers, but you're going to have to use something local like sessionStorage or localStorage that won't get dumped like your current in-memory copy of the data does when you refresh the page.