angular-sweetnotifier

Demonstration

Installation

Install with Bower

You can install and manage angular-sweetnotifier using Bower:

bower install angular-sweetnotifier --save

Install with npm

You can also install angular-sweetnotifier using npm:

npm install angular-sweetnotifier --save

Download manually

You can even download angular-sweetnotifier from Github

Import

AMD

<link rel="stylesheet" type="text/css" href="bower_components/angular-sweetnotifier/dist/angular-sweetnotifier.min.css">

require.config({
    paths: {
        'angular': 'bower_components/angular/angular.min',
        'angular-animate': 'bower_components/angular-animate/angular-animate.min',
        'angular-sweetnotifier': 'bower_components/angular-sweetnotifier/dist/angular-sweetnotifier.min'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angular-animate': {
            deps: ['angular']
        },
        'angular-sweetnotifier': {
            deps: ['angular']
        }
    }
});

define(['angular-sweetnotifier'], function(){
    //loaded
});

CommonJS

<link rel="stylesheet" type="text/css" href="node_modules/angular-sweetnotifier/dist/angular-sweetnotifier.min.css">

require('angular');
require('angular-animate');
require('angular-sweetnotifier');

Plain JavaScript

<link rel="stylesheet" type="text/css" href="bower_components/angular-sweetnotifier/dist/angular-sweetnotifier.min.css">
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sweetnotifier/dist/angular-sweetnotifier.min.js"></script>

Usage

Configuration

angular.module('demo', [
    'angular-sweetnotifier',
    'ngAnimate'
])
.config(['notifierProvider', function(notifierProvider) {
    //set position of notification
    //following placement value can be used
    //vertical:   top middle bottom
    //horizontal: left center right
    //top center by default
    notifierProvider.setPlacement('bottom', 'right');

    //use native notification while user leave this page for better UX
    //true by default
    notifierProvider.setUseNativeWhileBlur(false);

    //set icons for native notification
    //a key/value object is required
    //only info, error, warning, success as be used as key
    //no icon for native notification by default
    notifierProvider.setNativeIcons({
        info: 'http://findicons.com/files/icons/2166/oxygen/48/document_properties.png',
        error: 'http://findicons.com/files/icons/989/ivista_2/128/error.png',
        warning: 'http://findicons.com/files/icons/744/juicy_fruit/128/warning.png',
        success: 'http://findicons.com/files/icons/719/crystal_clear_actions/64/agt_action_success.png'
    });
}]);

Diective

<sweetnotifier placement="{{ placement }}" use-native-while-blur="{{ nativeWhileBlur }}"  native-icons="{{ nativeIcons }}"></sweetnotifier>

placement, use-native-while-blur, native-icons are just like what you saw in above configuration phase.

And attributes has higher priority than configuration.

But be aware that each attribute in directive is optional. And can be changed in later use.

This directive is mandatory as notification placeholder, and it can be put anywhere in body tag.

Call notification

angular.module('demo', [
    'angular-sweetnotifier',
    'ngAnimate'
])
.controller('DemoController', function($scope, notifier, UserService) {
    //notifier must be injected as service, in order to have the notification functionality available

    $scope.saveUser = function(user){
        UserService.saveUser(user)
        .success(function(){

            //emit an success type of notification with specified title and content
            notifier.emit({
                type: 'success',
                title: 'Success',
                content: 'User have been saved!'
            });
        })
        .error(function(){

            //emit an error type of notification with specified title and content
            notifier.emit({
                type: 'error',
                title: 'Error',
                content: 'Save user failed!'
            });
        });
    };
});

API

notifierProvider

setPlacement(vertical, horizontal)

setUseNativeWhileBlur(useNative)

setNativeIcons(icons)

{
    info: 'http://xxx.com/info.png',
    error: 'http://xxx.com/error.png',
    warning: 'http://xxx.com/warning.png',
    success: 'http://xxx.com/success.png'
}

notifier

emit(options)