angular-user-settings
v0.2.0
Published
[![Build Status](https://travis-ci.org/jvandemo/angular-user-settings.png?branch=master)](https://travis-ci.org/jvandemo/angular-user-settings)
Downloads
5
Maintainers
Readme
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