angular-tj-toast
Lightweight toast
aka flash message
support for Angular JS
apps:
- allows multiple toasts to be enqueued
- toasts can be displayed immediately or at a later time, such as after a view change
- must cycle through the toasts queue deliberately with
tjToast.now()
- expects only one listening directive
<tj:toast></tj:toast>
within DOM
Using in your app
To install to an app using Bower
, use:
$ bower install --save angular-tj-toast
Otherwise, clone this git repository.
Source dist/angular-tj-toast.min.js
and dist/angular-tj-toast.min.css
within your HTML.
Add tjToast
as a dependency to your Angular app module and other desired places:
var app = angular.module('yourApp', ['tjToast']);
app.controller('yourController', ['$scope','tjToast', function($scope, tjToast) {
$scope.toastTest = function(){
tjToast.enqueue({
level: 'success',
text: 'A great success!'
});
tjToast.now();
};
}]);
Place a listening directive once within your HTML:
<tj:toast></tj:toast>
Trigger the above example with a button click within your HTML:
<button type="button" ng-click="toastTest()">Toast Test</button>
Please look to the live demo and its source
within the demo
directory of this repository for additional examples and inspiration.
Development Dependencies
If you do not have Node.js
installed, consider installing it via
nvm:
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.16.1/install.sh | sh
$ source ~/.bashrc
Then install latest Node.js
version, set it as the default, and check to make sure it installed correctly:
$ nvm install 4.1.1
$ nvm alias default 4.1.1
$ node -v
v4.1.1
Then, to install Bower
globally, use:
$ npm install -g bower
Developing tjToast
View Node.js
dependencies in package.json
and Bower
dependencies in bower.json
.
To install all Node.js
dependencies, use:
$ npm install
To install all Bower
dependencies, use:
$ bower install
To install gulp
globally and avoid gulp: command not found
error, use:
$ npm install -g gulp
Once all dependencies are installed; run the development server, use:
$ gulp serve
Now, visit http://localhost:9000
Using browser-sync
via the configuration in gulpfile.js
will automatically
reload the browser on various source changes and automatically inject CSS on its source change.
Running Tests
To execute jshint syntax test, use:
$ gulp jshint
To execute all unit tests, use:
$ gulp karma
To execute end-to-end (e2e) tests, use:
$ gulp protractor
If Error: No selenium server jar found at the specified location
, then run:
$ gulp webdriver_update
To execute all 3 above tests (in sequence), use:
$ gulp test
Both Karma and Protractor tests use Jasmine for their syntax.
Building
To create minified JS and CSS source files within the dist
directory, use:
$ gulp build
License
angular-tj-toast is released under the MIT License