This project provides several tools for AngularJS:
- on-page notifications
- persisting scope variables in localStorage
You're able to show in-page notifications which you can add to page using directives or notifications
service.
List of notifications is cleared after page changing. There are three types of notifications:
- success
- alert
- error
First of all you should include notifications partial in base HTML document:
<div ng-include="'<path to cayenne lib>/notifications/partials/notifications.html'"></div>
Then you might change CSS if you want. In this case you need to change following CSS classes:
- .notifications - notifcation area
- .notification - notification container
- .notification-success, .notification-alert, .notification-error - appearance in accordance with notification type
You can describe text and condition when notification should be shown by directives:
<notification type="{{ notification_type }}" on="{{ notification_trigger_expression }}">{{ notification_text }}</notification>
- notification_type - success, alert or error
- notification_trigger_expression - any watchable expression
- notification_text - static text
Notification appears when trigger expression will be true.
Examples:
<notification type="error" on="form.oldpassword.$error.required">Please fill out the field Old password</notification>
<notification type="success" on="!form.oldpassword.$error.required">You've typed old password</notification>
Cayenne provides notifications
module with notifications
service with 4 methods:
- success(message) - show success notification
- alert(message) - show alert notification
- error(message) - show error notification
- reset() - clear all messages
Persisting means that scope variable will be stored in localStorage
and after every change the value will be updated.
Also the value is automatically restored after loading.
You might persist scope variable in two ticks:
- load
persist
module withpersistService
- call
persistService.persist($scope, key, prefix)
: - $scope {Object} Scope
- variable {String} Name of variable within $scope
- prefix {String} Optional: prefix for key in localStorage for not to intefere with the others
Example:
controller('loginController', function($scope, $rootScope, persistService){
persistService.persist($scope, 'username');
});
We love Testacular and to run tests execute simple command:
testacular start ./test/testacular.conf.js