JavaScript and AngularJS is still new to me.
I have trouble getting variables from my services into my scope. Here is what I'm doing:
myControllers.controller('UserController', function($scope, UserService) {
clearLoginForm();
updateStuff();
$scope.notifications = UserService.notifications;
function updateStuff() {
$scope.realName = UserService.realName;
$scope.loggedIn = UserService.loggedIn;
}
function clearLoginForm() {
$scope.loginName = '';
$scope.loginPassword = '';
}
$scope.login = function() {
UserService.login($scope.loginName,$scope.loginPassword);
updateStuff();
clearLoginForm();
}
$scope.logout = function() {
UserService.logout();
updateStuff();
clearLoginForm();
}
});
the UserService should hold the information about the logged in User and the functions for login/logout and account related stuff that should be polled from the server.
myModule.factory('UserService', function($interval) {
var loggedIn = false;
var realName = "";
var notifications = {};
resetNotifications();
function resetNotifications() {
notifications.msgCount = 0;
notifications.todoCount = 0;
notifications.ergCount = 0;
}
function login(name, password) {
if (password === 'abc') {
loggedIn = true;
realName = 'John Smith';
}
};
function logout() {
loggedIn = false;
realName = '';
resetNotifications();
}
function updateNotifications() {
if (loggedIn) {
notifications.msgCount = 1;
}
else {
resetNotifications();
}
};
$interval(updateNotifications, 10000);
return {
loggedIn : loggedIn,
realName : realName,
login : login,
logout : logout,
notifications : notifications
};
});
But it's not working. So I noticed that if I change "loggedIn" in the login/logout functions to "this.loggedIn" (and same with realName) then the values get propagated to the scope. Why do I need the "this"? Aren't "loggedIn" and "realName" in my closure? But this is not a solution since this is now a different "loggedIn" than used in the updateNotifications function (and here I can't change it to "this.loggedIn").
Secondly, I don't like that I need to call the updateStuff() Function everytime a value in the service changes. But it's not working without. Is there a better way to do it?
I fear I'm doing something fundamentally wrong.
When you return loggedIn at the end of your service, what you're really returning is a copy of the variable. So when you later update it inside of UserService, the copy won't get updated. The easiest way to solve that is with the getter approach:
function getLoggedIn() { return loggedIn; }
return {
getLoggedIn: getLoggedIn
};
your answer helped. but I found a better way to do it. I just wrapped loggedIn and realName in a real object
var userStatus = {
loggedIn : false,
realName : ""
};
and using that one in the controller. That also removes the necessity of the updateStuff function. I hope that won't cause any other trouble.
Related
I'm getting started with angular JS and there is something i don't really understand in a service i use :
(function () {
angular
.module('meanApp') // service qui dépend de ce module ?
.factory('authentication', authentication);
// $inject : To allow the minifiers to rename the function parameters and still be able to inject the right services, the function needs to be annotated with the $inject property. The $inject property is an array of service names to inject.
// https://docs.angularjs.org/guide/di
authentication.$inject = ['$http', '$window'];
function authentication ($http, $window) {
console.log("enters authentication service");
var saveToken = function (token) {
$window.localStorage['mean-token'] = token;
};
var getToken = function () {
return $window.localStorage['mean-token'];
};
var isLoggedIn = function() {
var token = getToken();
var payload;
if(token){
payload = token.split('.')[1];
payload = $window.atob(payload); //will decode a Base64 string
payload = JSON.parse(payload);
return payload.exp > Date.now() / 1000;
} else {
return false;
}
};
var currentUser = function() {
if(isLoggedIn()){
var token = getToken();
var payload = token.split('.')[1];
payload = $window.atob(payload);
payload = JSON.parse(payload);
return {
email : payload.email,
name : payload.name
};
}
};
//An interface between the Angular app and the API, to call the login and register end-points and save the returned token. This will use the Angular $http service
var register = function(user) {
console.log("ARNAUD: Arriving in register promise");
return $http.post('/api/register', user).success(function(data){
saveToken(data.token);
});
};
var login = function(user) {
return $http.post('/api/login', user).success(function(data) {
saveToken(data.token);
});
};
var logout = function() {
$window.localStorage.removeItem('mean-token');
};
// must return an object or function or at least a value from the factory
return {
currentUser : currentUser,
saveToken : saveToken,
getToken : getToken,
isLoggedIn : isLoggedIn,
register : register,
login : login,
logout : logout
};
}
})();
The functions declared above already return what i need and i just need to call them in my controller :
authentication.register(vm.credentials)
what is the exact purpose of
return {
currentUser : currentUser,
saveToken : saveToken,
getToken : getToken,
isLoggedIn : isLoggedIn,
register : register,
login : login,
logout : logout
};
Maybe that's a stupid question to angular JS senior developers but that's not clear for me
Thanks for helping me to put some light on that
A factory is a function that is called by angular, and that is supposed to return the instance of the service you want to make available to the application.
If you didn't return anything from the factory, it would effectively return undefined, and every time you inject the authentication service in your controllers, directives, etc., you would get undefined, instead of getting an object with methods.
module.factory() will return an object -> for you to be able to call anything on that object you have to return it.
the other way would be to use module.service - this will return an instance.
module.service('test', function() {
this.nice = function () {};
});
module.factory('test', function() {
function something() {}
return {
nice: something
};
});
factories are a lot more powerful than services - imagine the following:
module.fatory('prefix', function() {
return function (prefix) {
return {
log: function (message) {
console.log(prefix+': '+message;
}
};
};
});
I need a service that will remain instantiated during the life of the application and offer basic properties, similar to C# syntax. For example, if I create a profile service, I would like to get and set the User from within my controller with the following syntax;
activate();
function activate() {
vm.user = profile.user;
}
function login (user, pass) {
api.login(user, pass)
.then(function(response){
profile.user = response.data;
vm.user = profile.
});
}
Is the following example correct for this?..
(function () {
'use strict';
angular
.module('blocks.auth')
.service('profile', profileService);
profileService.$inject = [];
function profileService () {
this._user;
this.user = {
get function () {
return this._user;
},
set function (value) {
this._user = value;
}
};
}
})();
Sorry for the newbie question, but the syntax on the service looks incredibly odd and confusing.
Having also come from C# / .NET, I think I know what's messing with your head. Your brain is probably still thinking about the scope and variable definitions that you're used to seeing.
Here's how I would structure your service:
(function () {
'use strict';
angular
.module('blocks.auth')
.factory('profile', profileService);
function profileService () {
var _user = {};
var service = {
// User (read / write)
get user () {
_user = _user || {};
return _user;
},
set user (value) {
if (value && !value.id) { return; }
_user = value || {};
},
// isUserLoaded (read only ... no setter)
get isUserLoaded () {
return (_user && _user.id != null);
},
// Clear (similar to class method)
clear : function () {
_user = {};
}
};
return service;
}
})();
Think of the service object as your class in C#. This still uses your underscore for the local variable so you can see it a bit better. Heck, you could also move the _user variable into the service object if you want to mimic the C# class a bit closer. Then, the getters and setters are almost identical.
The only oddity is the clear() function I've added... mainly because of the syntax.
Yes, angular service is singleton. Just make sure you inject the service into your controller.
Something like below (untested):
angular.module('blocks.auth').controller('myController', function ($scope, api) {
$scope.activate() {
vm.user = profile.user;
}
$scope.login (user, pass) {
api.login(user, pass)
.then(function(response){
profile.user = response.data;
vm.user = profile.
});
}
$scope.activate();
})
I have been implementing a login feature in my Angular app and have it working for the most part. I am trying to show the userName in the header section. But it won't update after they login until the refresh the screen. What do I need to add to refresh that data?
I am including my header bar like so:
<div data-ng-include="'app/layout/topnav.html'"></div>
Here is my top nav section that I need the two way binding for Session.
(function() {
'use strict';
angular
.module('app.layout')
.controller('TopNav', TopNav);
TopNav.$inject = ['$route', 'routehelper', 'Session', 'authentication'];
function TopNav($route, routehelper, Session, authentication) {
/*jshint validthis: true */
var vm = this;
var routes = routehelper.getRoutes();
vm.isCurrent = isCurrent;
vm.userName = Session.userName;
activate();
function activate() { getNavRoutes(); }
function getNavRoutes() {
vm.navRoutes = routes.filter(function(r) {
return r.settings && r.settings.nav;
}).sort(function(r1, r2) {
return r1.settings.nav - r2.settings.nav;
});
}
function isCurrent(route) {
if (!route.title || !$route.current || !$route.current.title) {
return '';
}
var menuName = route.title;
return $route.current.title.substr(0, menuName.length) === menuName ? 'current' : '';
}
vm.logout = function() {
vm.userName = null;
authentication.logout();
};
}
})();
Here is my Session Service:
(function() {
'use strict';
angular.module('blocks.authentication').service('Session', function() {
this.create = function(userId, userName, userRole) {
this.userId = userId;
this.userName = userName;
this.userRole = userRole;
};
this.destroy = function() {
this.userId = null;
this.userName = null;
this.userRole = null;
};
return this;
});
})();
Including the nav like this, it only runs once. So once the Session is actually set on my log in page, it does not update here. Am I missing something? What is a better way to achieve this?
There are a couple of options, the first should work.
First, instead of setting vm.userName = Session.userName you should change it to vm.userName = Session.getUserName() where Session.getUserName is like:
function getUserName() {
return this.userName;
}
This is because when the controller is instantiated it sets vm.userName to whatever the value of Session.userName is at that point in time. It never knows about the change. Setting it to a function, it should check for that during every $digest cycle.
Otherwise, you could use a good old fashioned observer pattern to solve the issue.
In the TopNav controller:
// Register the setting of vm.userName as an observer
Session.registerObserverCallback(function () {
vm.userName = Session.userName;
});
And then in Session:
this.create = function(userId, userName, userRole) {
this.userId = userId;
this.userName = userName;
this.userRole = userRole;
// Everytime this changes, notify everyone
this.notifyObservers();
};
// Since almost everything in angular is a singleton, anyone can register here
// and whenever notifyObservers() is called, everyone gets notified of the new values
var observerCallbacks = [];
var registerObserverCallback = function (callback) {
observerCallbacks.push(callback);
};
var notifyObservers = function () {
angular.forEach(observerCallbacks, function (callback) {
callback();
});
};
This is a sample Controller to display the injected Session details. I assumed, the Session object contains the data. Session is the generated service.
angular.module('myApp')
.controller('SessionController', function($scope, Session) {
$scope.userName = Session.userName;
}
Sample usage
<div>{{userName}}</div>
I am looking for a solid way to have the 'current user id' in all my controllers available.
Using: Firebase Simple Login : Email / Password Authentication
My ida: I need a 'Factory' wich I can inject into my controllers,
to have the 'current user id' always available.
I came up with this code:
app.factory('User', ['angularFire',
//Get Current UserID
function(angularFire){
console.log ('FACTORY: User');
var currentUser = {};
var ReturnStr = '';
var ref = new Firebase("https://myFIREBASE.firebaseio.com/");
var authClient = new FirebaseAuthClient(ref, function (err, user) {
if (err) {
ReturnStr = 'FACTORY: User Error: ' + err;
console.log (ReturnStr);
//var User = ReturnStr;
} else if (user) {
console.log ('FACTORY: User: Login successfully:');
console.log (user);
currentUser = user;
} else {
//console.log ('-----------User: Logged Out ---------------');
ReturnStr = 'FACTORY: Logged out: Redirect to Login';
console.log (ReturnStr);
window.location.href = "/login.php";
}
});
return currentUser;
}
]);
My simplest Controller looks like:
function ToDoCtrl($scope, User) {
$scope.MyUser = User;
$scope.MyUser.test = 'Test';
}
In HTML (angular partials) i have:
<h2>{{MyUser.id}}</h2>
<h2>{{MyUser.email}}</h2>
<h2>{{MyUser.provider}}</h2>
<h2>{{MyUser.test}}</h2>
=> id, email, provider are 'undefined'. In console I see the 'FACTORY: User: Login successfully:' with correct user - Object.
=> Asynchronous loading of data problem?
I have also experimented (without luck):
$timeout(function () {
currentUser = user;
}
Such a FACTORY would be very useful!
Thanks for a pointing me in the right direction!
Edit 1.1: Now, with $rootscope hack
=> Same effect - mycontroller is too fast - factory to slow.
app.factory('User', ['$rootScope', '$timeout', 'angularFire',
//Aktueller Benutzer auslesen
function($rootScope, $timeout, angularFire){
console.log ('FACTORY: User');
var currentUser = {};
var ReturnStr = '';
var ref = new Firebase("https://openpsychotherapy.firebaseio.com/");
var authClient = new FirebaseAuthClient(ref, function (err, user) {
if (err) {
ReturnStr = 'FACTORY: User Error: ' + err;
console.log (ReturnStr);
//var User = ReturnStr;
} else if (user) {
console.log ('FACTORY: User: Login successfully:');
//currentUser = user;
$timeout(function () {
ReturnStr = 'FACTORY: Inside timout';
console.log (ReturnStr);
currentUser = user;
console.log (currentUser);
$rootScope.myUser = user;
$rootScope.myUserID = user.id;
$rootScope.loggedIn = true;
$rootScope.$apply();
return currentUser;
});
} else {
//console.log ('-----------User: Logged Out ---------------');
ReturnStr = 'FACTORY: Logged out: Redirect to Login';
console.log (ReturnStr);
//var User = ReturnStr;
window.location.href = "/login.php";
}
});
return currentUser;
}
]);
TAHNKS for any helpful suggestions! Wonderin how others solve this!
So here is my solution to this exact problem. I am using Firebase, FirebaseAuthClient, and angularFire for my Angular app. I ran into the same situation for my login system where you cannot inject the $scope into the factory and therefore I came up with making a controller that used a factory for it's methods to retrieve, add, update, and delete things. And in the controller, I have my firebaseAuth stuff going on, the setting of the User values, and references whick I assign to the scope of that. Once the user is logged in, they are redirected to another location, at which point the app.js file takes over with a child controller when at that address location.
My login also uses localStorage, so logins will persist, you can refresh and not have to keep logging in, and you can change it to be cookies or sessionStorage easy enough.
This is going to need to be adapted for your needs specifically if you choose to use this method, it's quite complex no matter what, but this is very solid for me and I'm no longer needing to worry about firebaseAuth or angularFire stuff now that my factories are all setup for passing data back and forth. I'm just doing angularJS stuff mostly with directives. So here's my code.
NOTE: This will need modifying, and some things will be pseudo or open-ended for you to figure out for your needs.
AuthCtrl.js
'use strict';
angular.module('YOUR_APP', []).
controller('AuthCtrl', [
'$scope',
'$location',
'angularFire',
'fireFactory',
function AuthCtrl($scope, $location, angularFire, fireFactory) {
// FirebaseAuth callback
$scope.authCallback = function(error, user) {
if (error) {
console.log('error: ', error.code);
/*if (error.code === 'EXPIRED_TOKEN') {
$location.path('/');
}*/
} else if (user) {
console.log('Logged In', $scope);
// Store the auth token
localStorage.setItem('token', user.firebaseAuthToken);
$scope.isLoggedIn = true;
$scope.userId = user.id;
// Set the userRef and add user child refs once
$scope.userRef = fireFactory.firebaseRef('users').child(user.id);
$scope.userRef.once('value', function(data) {
// Set the userRef children if this is first login
var val = data.val();
var info = {
userId: user.id,
name: user.name
};
// Use snapshot value if not first login
if (val) {
info = val;
}
$scope.userRef.set(info); // set user child data once
});
$location.path('/user/' + $scope.userRef.name());
} else {
localStorage.clear();
$scope.isLoggedIn = false;
$location.path('/');
}
};
var authClient = new FirebaseAuthClient(fireFactory.firebaseRef('users'), $scope.authCallback);
$scope.login = function(provider) {
$scope.token = localStorage.getItem('token');
var options = {
'rememberMe': true
};
provider = 'twitter';
if ($scope.token) {
console.log('login with token', $scope.token);
fireFactory.firebaseRef('users').auth($scope.token, $scope.authCallback);
} else {
console.log('login with authClient');
authClient.login(provider, options);
}
};
$scope.logout = function() {
localStorage.clear();
authClient.logout();
$location.path('/');
};
}
]);
And now for the nice and simple yet quite reusable factory. You will need to set your Firebase path for your app for the baseUrl variable for it to work.
fireFactory.js
'use strict';
angular.module('YOUR_APP').
factory('fireFactory', [
function fireFactory() {
return {
firebaseRef: function(path) {
var baseUrl = 'https://YOUR_FIREBASE_PATH.firebaseio.com';
path = (path !== '') ? baseUrl + '/' + path : baseUrl;
return new Firebase(path);
}
};
}
]);
Info
You give the factory just a piece of the path reference such as 'users' which will be used as part of the full path ref to where you want to store your user data.
fireFactory.firebaseRef('users')
Once you have a reference set for a user, they won't need to be set again it will just use the existing data and .auth() to it. Additionally if there's an existing 'token' in localStorage it will use that to auth() the user too.
Otherwise, it will login() the user and pop open the Oauth windows for them to do so using whatever option you provide them.
I have spent a lot of time, many many hours days and yes even months searching for something better than this when it comes to Firebase/FirebaseAuthClient and angularFire. With the way the Firebase API and FireAuth API is, it's very annoying to make them play nicely with each other when using them with angularFire anyways. It's very frustrating but I've gotten past it finally.
If you want to check out the code for my app and see how I'm doing these things more completely, you can find it in this branch of my Webernote github repo.
Feel free to fork it, install and run it locally, or contribute to it even if you like. I could use some help myself :)
Hope this helps you!!
Here's the way I do it.
First of all I have my firebase auth service (I'm not using Angularfire) that calls off to Singly to handle logins. When the user status changes it $broadcasts an event.
p4pApp.factory('firebaseAuth', function($rootScope, singlyAuth) {
var auth = {},
FBref = new Firebase(p4pApp.FIREBASEPATH);
auth.login = function(service) {
singlyAuth.login(service);
};
auth.logout = function() {
FBref.unauth();
auth.user = null;
auth.broadcastAuthEvent();
};
auth.broadcastAuthEvent = function() {
$rootScope.$broadcast('authEvent');
};
auth.authWithToken = function(token) {
if (token !== undefined) {
FBref.auth(token, function(error, authData) {
if(!error) {
auth.user = authData.auth.account;
auth.broadcastAuthEvent();
} else {
auth.user = null;
auth.broadcastAuthEvent();
}
}, function(error) {
auth.user = null;
auth.broadcastAuthEvent();
});
}
};
return auth;
});
Then I have a 'top level' controller that looks after authorisation state.
var AuthCtrl = function($scope, firebaseAuth, singlyAuth, firebase, user) {
$scope.user = null;
$scope.logout = function() {
firebaseAuth.logout();
};
$scope.isLoggedIn = function() {
return !!$scope.user;
};
// src: Alex Vanston (https://coderwall.com/p/ngisma)
$scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
$scope.$on('authEvent', function() {
$scope.safeApply(function() {
$scope.user = firebaseAuth.user;
});
user.setID(firebaseAuth.user);
if (firebaseAuth.user) {
firebase.fetch(['users', firebaseAuth.user], function(results) {
if (results) {
user.setData(results);
} else {
results = {};
results.createdAt = DateTimeStamp();
}
results.lastLogin = DateTimeStamp();
firebase.set('users', firebaseAuth.user, results);
});
} else {
user.clearData();
}
});
};
Finally, I use a dedicated user service to maintain user state. (It's still in development)
p4pApp.factory('user', function() {
var userService = {}, user={};
user.data = {};
userService.setID = function(id) {
user.id = id;
};
userService.getID = function() {
return user.id;
};
userService.setData = function(data) {
user.data = data || {};
};
userService.getData = function() {
return user.data;
};
userService.clearData = function() {
user.data = {};
};
userService.setDataField = function(field, data) {
user.data[field] = data;
};
userService.clearDataField = function(field) {
delete user.data[field];
};
userService.pushData = function(key, data) {
if (typeof(key) === 'string') {
user.data[key] = data;
} else {
_.reduce(key, function(obj, child, index, list) {
obj[child] = obj[child] || {};
if (index == list.length-1) {
obj[child] = data;
}
return obj[child];
}, user.data);
}
};
userService.deleteData = function(key) {
if (typeof(key) === 'string') {
delete user.data[key];
} else {
_.reduce(key, function(obj, child, index, list) {
obj[child] = obj[child] || {};
if (index == list.length-1) {
delete obj[child];
return;
}
return obj[child];
}, user.data);
}
};
return userService;
});
This is most probably due to async nature of the call. To fix it you would have to
Inject $scope into the factory function (similar to angularFire dependency)
Use $scope.$apply() after the assigment currentUser = user;
Another solution that works for me:
account.service.js
(function() {
'use strict';
angular
.module('app.account')
.factory('Account', Account);
Account.$inject = [
'$firebaseAuth',
'$firebaseObject'
];
/* #ngInject */
function Account(
$firebaseAuth,
$firebaseObject,
) {
var firebaseRef = new Firebase('https://<<-- MY_FIREBASE -->>.firebaseio.com');
var authObj = $firebaseAuth(firebaseRef);
var service = {
userInfo: null
};
activate();
return service;
////////////////
function activate() {
// Add listeners for authentication state changes
authObj.$onAuth(function(authData) {
if (authData) {
// Load the userInfo
loadUserInfo(authData);
} else {
// Destroy the userInfo Object if one exists
if (service.userInfo) {
service.userInfo.$destroy();
service.userInfo = null;
}
}
});
}
function loadUserInfo(authData) {
var userRef = firebaseRef.child('users').child(authData.uid);
var loadedInfo = $firebaseObject(userRef);
loadedInfo.$loaded()
.then(function() {
service.userInfo = loadedInfo;
})
.catch(function(error) {
switch (error.code) {
case 'PERMISSION_DENIED':
alert('You don\'t have the permission to see that data.');
break;
default:
alert('Couldn\'t load the user info.');
}
});
}
}
})();
some-component.controller.js
(function() {
'use strict';
angular
.module('app')
.controller('SomeController', SomeController);
SomeController.$inject = [
'Account'
];
/* #ngInject */
function SomeController(
Account
) {
var vm = this;
vm.userInfo = userInfo;
////////////////
function userInfo() {
return Account.userInfo;
}
...
}
})();
some-component.html
...
<div class="user-id">
{{vm.userInfo().id}}
<div>
...
I am using firebase simple login auth with angularjs and I want to create a single page app.
Before this, I have tried using service, main controller to handle it but I don't think it is good enough because I have to call FirebaseAuthClient() every time there is a route.
I also try to put FirebaseAuthClient() in angularjs .run() which initialize when app is start.
But it won't work when there is a route, I think it is because not a full page load.
Ok,
And here is what I want,
except login page, every route (pages) are required login.
A global FirebaseAuthClient() checking on every route so I don't need to call it again.
A global user which return from FirebaseAuthClient()
I'm not sure I understand. You only need to initialize FirebaseAuthClient and all login() once in your entire app. It's a singleton, and your auth credentials apply to any Firebase operations you perform.
What makes you think that this is not the case? What sorts of errors are you seeing?
Here is what I was using before moving auth over to Singly. Maybe it helps?
p4pApp.factory('firebaseAuth', function($rootScope) {
var auth = {},
FBref = new Firebase(p4pApp.FIREBASEPATH);
auth.broadcastAuthEvent = function() {
$rootScope.$broadcast('authEvent');
};
auth.client = new FirebaseAuthClient(FBref, function(error, user) {
if (error) {
} else if (user) {
auth.user = user;
auth.broadcastAuthEvent();
} else {
auth.user = null;
auth.broadcastAuthEvent();
}
});
auth.login = function() {
this.client.login('facebook');
};
auth.logout = function() {
this.client.logout();
};
return auth;
});
The AuthCtrl is common to all/most of my pages.
var AuthCtrl = function($scope, firebaseAuth) {
$scope.login = function() {
firebaseAuth.login();
};
$scope.logout = function() {
firebaseAuth.logout();
};
$scope.isLoggedIn = function() {
return !!$scope.user;
};
// src: Alex Vanston (https://coderwall.com/p/ngisma)
$scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
$scope.$on('authEvent', function() {
$scope.safeApply(function() {
$scope.user = firebaseAuth.user;
});
});
};
From within the AuthCtrl you can just call isLoggedIn() to see if the user is logged in or not.