angularjs override service setter and getter

Question

I'm new to JS and angular, I have a currentUser service in angular... It should set the current user retrieved to the localStorage to persist it between page refreshes

the service is defined as follows

var currentUserSrvc = function() {
  // some logic on how to save the user to localStorage
  return {
    user: {}
  };
};
angular.module('app').factory('currentUser', currentUserSrvc);

I want to override the setters and getters for this service to work with localStorage... but without adding setters and getters manually

don't mind how the localStorage internals will work

// I just want to use it like
currentUser.user = response.user
// instead of using it like (given that I'll provide a setter and a getter methods)
currentUser.setUser(response.user)

is that possible using angular js ?

so you want to add a $watcher to this service, to watch changes on user, right? — Sergio Marcelino, Jan 29 '15 at 16:58
no I want to override the setters and getters in the service to allow extra logic injected in them. — a14m, Jan 29 '15 at 16:59
unfortunately in javascript there's no internal setter/getter to properties (like some languages), you must add a $watcher to watch changes on properties (just like angularjs do) — Sergio Marcelino, Jan 29 '15 at 17:00
the `service.__proto__` has the following methods `__defineGetter__` `__defineSetter__` `__lookupGetter__` `__lookupSetter__` ... Isn't angular using those as setters and getters in when `currentUser.user = ...` ?! — a14m, Jan 29 '15 at 17:05
For reasons I don't know, this feature is being removed on latest versions of modern browsers, take a look at this page and se a deprecated note: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ Unfortunately as far as I know, $watcher is the only option — Sergio Marcelino, Jan 29 '15 at 17:08
@SergioFilhow lies, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects — Wawy, Jan 29 '15 at 17:20

Wawy · Accepted Answer · 2015-01-29T17:22:43.610

Is this what you are looking for?

var currentUserSrvc = function() {
  // some logic on how to save the user to localStorage

  return {
     get user() {return localStorage.user;},
     set setUser(user) {localStorage.user = user}
  };
};
angular.module('app').factory('currentUser', currentUserSrvc);

This is how you use getters and setters in javascript:

So you would:

currentUser.user //retrieves localStorage.user
currentUser.setUser = "myUser" //sets localStorage.user to "myUser"

EDIT: Alternative you can do this.

var currentUserSrvc = function() {
  var currentUser = {}
  Object.defineProperty(currentUser, "user", {
    get: function() {return localStorage.user; },
    set: function(user) { localStorage.user = user; }
  })

  return currentUser;
};
angular.module('app').factory('currentUser', currentUserSrvc);

So you would:

currentUser.user //retrieves localStorage.user
currentUser.user = "myUser" //sets localStorage.user to "myUser"

EDIT2: Or you could even do this:

var currentUserSrvc = function() {
  // some logic on how to save the user to localStorage

  return {
     get user() {return localStorage.user;},
     set user(user) {localStorage.user = user}
  };
};
angular.module('app').factory('currentUser', currentUserSrvc);

I'm using coffeescript so both the first and last solution could not be applied... and the second solution works... but when I added a log to it I noticed that `currentUser.user = { someObject }` logged 1 setter call and 3 getter calls ?! — a14m, Jan 29 '15 at 17:36
I've marked it as answer although that I didn't figure out why 1 setter and 3 getter calls when using it like `currentUser.user = { name: 'name', title: 'title', email: 'email' }` ?! — a14m, Jan 29 '15 at 17:42
@artmees not sure, It only calls the setter once in mine and 0 times the getter when I run "currentUser.user = { name: 'name', title: 'title', email: 'email' }" in the console. — Wawy, Jan 29 '15 at 18:23

angularjs override service setter and getter

1 Answers1