aus

angular-user-settings

[![Build Status](https://travis-ci.org/jvandemo/angular-user-settings.png?branch=master)](https://travis-ci.org/jvandemo/angular-user-settings)

Showing:

Popularity

Downloads/wk

1

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

Type Definitions

Tree-Shakeable

No?

Readme

Angular User Settings

Build Status

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100