angular-growl

growl like notifications for angularJS projects, using bootstrap alert classes

Features

• growl like notifications like in MacOS X
• using standard bootstrap classes (alert, alert-info, alert-error, alert-success)
• global or per message configuration of a timeout when message will be automatically closed
• automatic translation of messages if angular-translate filter is present, you only have to provide keys as messages, angular-translate will translate them
• pre-defined $http-Interceptor to automatically handle $http responses for server-sent messages
• < 1 kB after GZIP

Changelog

0.2.0 - 22nd Sept 2013

• reworking, bugfixing and documenting handling of server sent messages/notifications
• externalizing css styles of growl class
• provide minified versions of js and css files in build folder

0.1.3 - 20th Sept 2013

• introducing ttl config option, fixes #2

Installation

You can install angular-growl with bower:

bower install angular-growl

Alternatively you can download the files in the build folder manually and include them in your project.

As angular-growl is based on its own angularJS module, you have to alter your dependency list when creating your application module:

Finally, you have to include the directive somewhere in your HTML like this:

Usage

Just let angular inject the growl Factory into your code and call the 4 functions that the factory provides accordingly:

If angular-translate is present, its filter is automatically called for translating of messages, so you have to provide only the key:

Configuration

Automatic closing of notifications (timeout, ttl)

Standard behaviour is, that all notifications need to be closed manually by the user.

However, you can configure a global timeout (TTL) after which notifications should be automatically closed. To do this, you have to configure this during config phase of angular bootstrap like this:

This sets a global timeout of 5 seconds after which every notification will be closed.

You can override TTL generally for every single message if you want:

This sets a 10 second timeout, after which the notification will be automatically closed.

If you have set a global TTL, you can disable automatic closing of single notifications by setting their ttl to -1:

Handling of server sent notifications

When doing $http requests, you can configure angular-growl to look automatically for messages in $http responses, so your business logic on the server is able to send messages/notifications to the client and you can display them automagically:

This adds a pre-defined angularJS HTTP interceptor that is called on every HTTP request and looks if response contains messages. Messages from the server need to satisfy these requirements:

• response needs to have a "messages" attribute of type array in root of response
• every message needs to have these attributes:
  • text - message text
  • severity - severity of message, needs to be one of the following strings: "warn", "info", "error", "success"

Server messages will be created with default TTL.