ngToast in angularjs with jhipster

We have an application which was created with jhipster and using angular 1.4.5. We wanted to show notificactions without disrupting the user with modals. We found ngToast which looked right to our needs. Let’s see how you can configure it.

First add the required dependencies using bower (I know it’s retired but it was used before. You can omit this step and just include the files in the index.html file).

cd webapp/
bower install ngToast

then add the files to your index.html file

index.html

<head>
<link rel="stylesheet" href="bower_components/ngToast/dist/ngToast.min.css" />
</head>
<body>
http://bower_components/ngToast/dist/ngToast.min.js
</body>

we can configure the location of notification messages on screen in the file app.js

'use strict';

angular.module('myApp', ['LocalStorageModule', 
    'ngResource', 'ui.router', 'ngCookies', 'color.picker', 'ngAria', 'ngCacheBuster', 'ngFileUpload', 'infinite-scroll', 'ngToast'])
    .run(function ($rootScope, $location, $window, $http, $state,  Auth, Principal, ENV, VERSION) {            
        ...
    })
    .config(['ngToastProvider', function (ngToast) {
        ngToast.configure({
            verticalPosition: 'bottom',
            horizontalPosition: 'right'
        });
    }])
;

an then use it in our controller

'use strict';

angular.module('myApp')
        .controller('myController', function ($scope, $compile, $element, 
            Principal, ngToast) {
            ...
            $scope.showSuccess = function () {              
                    ngToast.create({
                        className: 'success',
                        dismissButton: true,
                        compileContent: true,
                        content: 'Great! your file was saved.'
                    });
                });
            };            
        });

sources:
http://tamerayd.in/ngToast/#
https://github.com/tameraydin/ngToast/issues/10#issuecomment-64061276

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s