In this tutorial, we learn to display simple notifications in Angular js applications. We will use angular-growl-2 library to make our life easier. The best thing about our approach is that it is, both developer and user-friendly. Which means it looks neat and is pretty easy to implement.
Why we need them
Whenever you are working on an application that involves user interaction especially updating or performing any operation in the database or performing operations where the result is not reflected immediately, you will want to notify the user about the result of that action.
This can be done in multiple ways, if you want to force the user to acknowledge the result you can use alerts or modal windows for better UI, or maybe you can redirect the user to a new page. We will not be using any of these options. Instead, we will be going for a write less and do more kind of an approach.
We will be displaying growl type notifications.
DEMO DOWNLOAD
We will be using “angular-growl-2” library to implement this.
Angular-growl-2 is library using which we can implement Growl like notifications for angularJS projects, it requires AngularJS and bootstrap css as an external dependency. Basic usage is pretty simple and it comes with handy configuration options.
- Also see: Fancy Alert and Confirm Box in AngularJS
Initial Setup
Here we have a very skinny initial app setup, lets have a look at our code.
In our index file, we’ve included bootstrap css files, angular js 1.3.15 and also our app.js where our js code will be.
We have initialized our app and controller on the body.
We also have five buttons, the first four will show the respective notifications and the fifth one will show all notifications together, we have also specified function calls to ng-click directive on each of them.
Lets have a look at our app.js
var notifyApp = angular.module('notifyApp',[]); //create an angular module
notifyApp.controller('notifyCtrl',['$scope',function($scope){
$scope.showWarning = function(){
}
$scope.showError = function(){
}
$scope.showSuccess = function(){
}
$scope.showInfo = function(){
}
$scope.showAll = function(){
}
}]);
Here above we have our notifyApp and notifyCtrl, as you can see there is nothing fancy here, we have five functions defined, all of which at this moment do nothing.
Lock and Load
First thing we need to do to use angular-growl is to include its css and js library. We can find the entire project on Github
We can install it using.
bower install angular-growl-v2
Or we can add individual links from these URLs:
JS:https://raw.githubusercontent.com/JanStevens/angular-growl-2/master/build/angular-growl.min.js
CSS:https://raw.githubusercontent.com/JanStevens/angular-growl-2/master/build/angular-growl.min.css
...
...
...
Next thing we need to inject angular-growl as a dependency into our module.
var notifyApp = angular.module('notifyApp',['angular-growl']);
Finally, we have to add the growl directive in our html, now since we are going to show notifications globally, it is good to add the directive higher up the HTML tree. For this demo, we will be adding the directive just below the start of the body.
.. .... ..
.. .. ...
Notifications in action
So we have completed the basic setup to get the growl notifications initialized, next to use them, we can do the following.
1) Inject growl service into the controller.
We will inject growl into our controller which will provide us with necessary methods to call different kinds of notifications.
notifyApp.controller('notifyCtrl',['$scope','growl',function($scope,growl){
....
}]);
2) Displaying notification.
Now we will add growl functions to our functions which we had defined earlier on ng-click.
notifyApp.controller('notifyCtrl',['$scope','growl',function($scope,growl){
$scope.showWarning = function(){
growl.warning('This is warning message.',{title: 'Warning!'});
}
$scope.showError = function(){
growl.error('This is error message.',{title: 'Error!'});
}
$scope.showSuccess = function(){
growl.success('This is success message.',{title: 'Success!'});
}
$scope.showInfo = function(){
growl.info('This is an info message.',{title: 'Info!'});
}
$scope.showAll = function(){
growl.warning('This is warning message.',{title: 'Warning!'});
growl.error('This is error message.',{title: 'Error!'});
growl.success('This is success message.',{title: 'Success!'});
growl.info('This is an info message.',{title: 'Info!'});
}
}]);
There are four different types of notification.
Error:Generally used to display critical errors. growl.error(‘This is error message.’);
Success:Useful to notify users when their operation is successful. growl.success(‘This is a success message.’);
Warning:Display warnings. growl.warning(‘This is a warning message.’);
Info:Notify other general stuff. growl.info(‘This is a info message.’);
That’s it, we have successfully implemented notifications into our application, more importantly without any hassle. Can’t get more easier than this, could it ?
This was just a basic implementation yo get you started, angular-growl-2 comes with a bunch of handy global and isolated configuration.
Displaying messages inline, adding countdown timer(TTL), adding callback functions to close event, changing position of message are few of them.
Visit this link to explore more on different configurations.
Watch Video tutorial
Conclusion
Notifying users is an important part of any web application. Angular-grow-2 provides an easy way to implement them into our angular applications.
So go ahead and try this in your next project.
Credits
JanStevens, click here to view on Github
