Angular User Settings

Easily manage persistent user-specific settings in your AngularJS application:

• very lightweight (~2KB)
• no external dependencies
• no database or backend required
• works out-of-the-box, no configuration required
• settings are automatically persisted across browser sessions using localStorage
• gracefully falls back to non-persistent settings when localStorage is not available

From both your scripts and views!

Usage

First install the module using bower:

$ bower install angular-user-settings

and add the library to your application:

<script src="angular-user-settings.min.js"></script>

Then add the angularUserSettings module to the dependencies of your AngularJS application module:

angular.module('yourApp', ['angularUserSettings']);

Now you can access the user's settings using the $userSettings service in script:

ngModule.controller('YourController', function($userSettings){
  
  $userSettings.set('foo', true);
  $userSettings.get('foo'); // => true
  
  $userSettings.set('foo', 'bar');
  $userSettings.get('foo'); // => 'bar'
  
  $userSettings.set('foo', { foo: 'bar' });
  $userSettings.get('foo'); // => { foo: 'bar' }
  
});

or using the user-settings directive in your views:

<!-- adding the user-settings attribute to an element -->
<!-- conveniently exposes the $userSettings service in your view -->
<section user-settings>
 
  <a ng-click="$userSettings.set('foo', 'bar')">Set foo to bar</a>
  
  <p>Foo: {{ $userSettings.get('foo') }}</p>
  
</section>

To keep the markup as DRY as possible, there is a user-setting attribute available to grab an individual setting and expose it using $userSetting to the child elements:

<!-- instead of exposing all settings, we grab an individual setting -->
<!-- that is exposed as $userSetting -->
<section user-setting="debug-mode">
 
  <!-- if the setting is enabled -->
  <div ng-if="$userSetting.enabled">
    <p>Debug mode is enabled<p>
    <a href="$userSetting.disable()">Disable debug mode</a>
  </div>
  
  <!-- if the setting is disabled -->
  <div ng-if="$userSetting.disabled">
    <p>Debug mode is enabled<p>
    <a href="$userSetting.enable()">Enable debug mode</a>
  </div>
  
</section>

The $userSettings service

The following methods are available on the $userSettings service:

$userSettings.get(key)

Get setting for key.

Arguments

None.

Returns

Any.

$userSettings.set(key, value)

Set value for key.

Arguments

None.

Returns

$userSettings

$userSettings.enable(key)

Set value for key to true.

Arguments

None.

Returns

$userSettings

$userSettings.disable(key)

Set value for key to false.

Arguments

None.

Returns

$userSettings

$userSettings.enabled(key)

Check if setting is truthy or not.

Arguments

None.

Returns

boolean.

$userSettings.disabled(key)

Check if setting is falsy or not.

Arguments

None.

Returns

boolean.

Contribute

To update the build in the dist directory:

$ gulp

To run the unit tests using the src files:

$ gulp test-src

To run the unit tests using the unminified library:

$ gulp test-dist-concatenated

To run the unit tests using the minified library:

$ gulp test-dist-minified

Change log

v0.2.0

• Added $userSetting directive
• Added unit tests
• Added initial documentation

v0.1.0

• Added $userSettings service
• Added storage service
• Added userSettings directive
• Added unit tests
• Added initial documentation