How to customize service setters and getters in AngularJS

Question

How to customize service setters and getters in AngularJS

Just starting out with JS and angular, I've created a currentUser service in angular... The goal is to store the current user in the localStorage so it persists between page refreshes

Here's how the service is defined

var currentUserSrvc = function() {
  // logic for saving user to localStorage
  return {
    user: {}
  };
};
angular.module('app').factory('currentUser', currentUserSrvc);

I'm looking to customize the setters and getters for this service to interact with localStorage... but without manually adding setters and getters

Details of the localStorage functionality are not important

// I just want to be able to do
currentUser.user = response.user
// instead of having to use (if setter and getter methods were provided)
currentUser.setUser(response.user)

Is it possible with angular js?

javascript angularjs angular-services angularjs-factory

Answer 1

Answer №1

Is this the solution you seek?

var userHandler = function() {
  // operations to manage user data in localStorage

  return {
     get userData() {return localStorage.user;},
     set setUserData(user) {localStorage.user = user}
  };
};
angular.module('app').factory('userModule', userHandler);

This demonstrates how to implement getters and setters in JavaScript:

For example:

userModule.userData // retrieves localStorage.user
userModule.setUserData = "myUser" // sets localStorage.user to "myUser"

EDIT: An alternative approach is as follows.

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

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

Therefore:

userModule.userData // retrieves localStorage.user
userModule.userData = "myUser" // sets localStorage.user to "myUser"

EDIT2: Another option could be:

var userHandler = function() {
  // logic to handle saving user data to localStorage

  return {
     get userData() {return localStorage.user;},
     set userData(user) {localStorage.user = user}
  };
};
angular.module('app').factory('userModule', userHandler);

Answer 2

Is this the solution you seek?

var userHandler = function() {
  // operations to manage user data in localStorage

  return {
     get userData() {return localStorage.user;},
     set setUserData(user) {localStorage.user = user}
  };
};
angular.module('app').factory('userModule', userHandler);

This demonstrates how to implement getters and setters in JavaScript:

For example:

userModule.userData // retrieves localStorage.user
userModule.setUserData = "myUser" // sets localStorage.user to "myUser"

EDIT: An alternative approach is as follows.

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

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

Therefore:

userModule.userData // retrieves localStorage.user
userModule.userData = "myUser" // sets localStorage.user to "myUser"

EDIT2: Another option could be:

var userHandler = function() {
  // logic to handle saving user data to localStorage

  return {
     get userData() {return localStorage.user;},
     set userData(user) {localStorage.user = user}
  };
};
angular.module('app').factory('userModule', userHandler);

How to customize service setters and getters in AngularJS

Answer №1

Similar questions

What is the best way to use AngularJS filters to arrange time?

The outcome of the AJAX RSS Reader remains unpredictable

Is there a delay in using ngShow and ngClick for authentication in AngularJS and Firebase?

The powerful duo of jQuery and CSS shine brilliantly on iOS devices

AFrame: keeping an element's world position and rotation intact while reparenting

Guide on verifying the status of a switch toggle using Selenium and C#

Reload the Angular application and navigate to a different state

The ng-table is currently showing all of its data instead of limiting the display to just 10 entries

The JavaScript file specified in the script tag's src attribute was successfully downloaded, but it did not execute as expected after being fetched

Issue with menu display after clicking icon

The functionality of Angular2 two-way binding ceases to function once the Google Maps callback is

Ionic 2 development featuring a stylish background image

Tips for utilizing a variable name with ajax in jQuery

Tips for constructing a multi-dimensional entity from an existing object?

Mastering React hooks: A guide to effectively updating and rendering elements

Place a <script> tag within the Vue template

Can you explain the meaning behind this code snippet using spread syntax, the .map method, and .dataset.filter?

Determine if an Android application has been installed using JavaScript or jQuery

Improving the efficiency of my conditions in a function with Vue JS

Enhancing textures in three.js