logo
No cross
Book Your Free Strategy Call
Valid number
Prefer email? Reach us directly at:
no-img
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Free 1:1 Strategy Session
Not sure what’s next? Let’s fix that.
In 30 minutes, we’ll help you uncover what’s not working — and map a path to move forward with confidence.





Honest feedback from experts
Actionable advice tailored to your goals
No hard sell — just clarity
Book Your Free Call
Expert Insights for Tech Leaders
Curious minds like yours deserve smarter content.
Get access to the trends, tools, and ideas shaping tomorrow’s products — before everyone else.
Fresh blogs, deep dives & frameworks
Built for founders, PMs & tech leaders
No spam — just the good stuff
Index
Programming Guides & Solutions

How to add Flash Messages in AngularJS?

How to add Flash Messages in AngularJS?

Using Flash messages in AngularJS is simple with the help of messageCentermodule. To get started with, we will add JS file of messagecentermodule from http://ngmodules.org/modules/message-center. Then, we will inject this module in our current application module as follows:


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.

search-btnsearch-btn
cross-filter
Search by keywords
No results found.
Please try different keywords.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Get Exclusive Offers, Knowledge & Insights!