How to add Flash Messages in AngularJS?

angular.module('myApp', ['ngRoute', 'myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'MessageCenterModule']);

Now our next step is to add message center service in out controllers we where we want to add the message. Below is an example of how to inject this service into controller

angular.module('myApp.controllers', []). // Since you injected globally in app.js you don't need to do it here. controller('fooController', ['messageCenterService', function (messageCenterService) { … }]);

Now we will take a look at example where will add messages in response from Http call. Below is the example of user signup scenario.

ApiFactory.userSignUp($scope.signUpRequest).success(function(data){
messageCenterService.add('success', 'An email has been sent to you. Please click on the link to confirm your account.', { status: messageCenterService.status.next });
$state.go("home")
}).catch(function(data,status){

angular.forEach(data.data.error, function(value, key) {
messageCenterService.add(‘danger’, value, { status: messageCenterService.status.shown });
messageCenterService.reset();
});
})

In above example we add message type success when we got a successful response from API call and use ‘danger’ to add error messages from API call. There are total four types of messages.
(1) Success
(2) Danger
(3) Info
(4) Warning
In above example, we use status ‘next’. When we get response and redirect to other page, then ‘next’ will maintain the message. This is the usage of ‘next’ status keyword. There are total four other types of status
(1) Next
(2) Permanent (Message will be permanent through out the session)
(3) Unseen (Once a user see a message, it will not be shown next time)
(4) Shown (This means message already shown to the user and message will disappear in next route change)
To show messages on html we just have to place

this directive in our layout and it will show the messages accordingly.