Angularjs toaster

    Apr 25, 2016       by Pankaj Kumar
angularjs-toaster.jpg

In this article we will learn to apply toaster in any angularjs application. So first of all we need to included the below files in our front end part(in our html section).

<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.css" rel="stylesheet" />

<script src="https://code.angularjs.org/1.4.4/angular-animate.min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>

 

 

After that we need to inject the toaster in our angular controller like below.

 

app.controller('homeCtrl', ['$scope','$http','$cookieStore','toaster', function($scope,$http,$cookieStore,toaster) {

 

Then whenever we want toaster we need to put the below code in that block either on success or on failure condition in our angularjs code

 

toaster.pop('error', "Error", 'Error occured! Please try later.');

 

The above line will throw error in falure case. And the last step is to put the below code into the current html page.

 

<toaster-container toaster-options="{'close-button': true}"></toaster-container>

 

That’s all we need for the app to work. We’re done!

You can download complete code from here. Download Code


WHAT'S NEW

Find other similar Articles here: