How To Add Flash Messages in AngularJS?

Table of Contents

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.

Subscribe to our Newsletter.

Thank you! Your subscription has been added to our newsletter!
Oops! Something went wrong while submitting the form.

Related Blogs.

What is Material Design Lite and what are its advantages?What is Material Design Lite and what are its advantages?
MDL stands for "Material Design Lite". It is a free and open source library used for website's designing and its a look like material design.
SEO with Angular – Angular UniversalSEO with Angular – Angular Universal
SEO is an abbreviation of Search Engine Optimization. Here, you will learn how to do SEO with Angular for a web page.
Difference between Functional and Object Oriented ProgrammingDifference between Functional and Object Oriented Programming
These are two very popular programming paradigms in software development that developers design and program to. Read more to find out.
How to use Font Awesome for your website?How to use Font Awesome for your website?
Font Awesome helps adding scalable and beautiful icons on a web page. Let's teach you how to use awesome fonts for your site.
JQuery: The Write Less, Do MoreJQuery: The Write Less, Do More
jQuery is a (write less or do more) lightweight JS library that simplifies programming with JavaScript. Know more about the benefits of using jQuery in this blog.
Cross Browser Compatibility IssuesCross Browser Compatibility Issues
What is Cross Browser issue? They usually occur in various web applications. Learn to solve these cross browser compatibility issues in this blog post.
Angular 4 FORMS ConfusionAngular 4 FORMS Confusion
Many people are often stuck with the Angular 4 forms confusion. But no need to worry because this solution will work for you.
Publish Subscribe patternPublish Subscribe pattern
Nowadays, Web Applications are set to target maximum relevant users as they can. In order to do so, an application must have these qualities.
Dependencies issue when one signal is used with google maps (React native)Dependencies issue when one signal is used with google maps (React native)
Problem Statement: Google maps work fine when used alone but it get dependency issue when one signal is added to the project.
Setup Redis on AWSSetup Redis on AWS
This tutorial will help you in setting up redis on AWS. Follow these steps to configure the redis through Amazon Linux.
React Native Facebook Login?React Native Facebook Login?
This guide provides examples of using the Facebook Login Button and Login Manager components in your React Native applications.
Create an Angular modular pluginCreate an Angular modular plugin
How to develop a Modular Plug-in For angular 4? Learn to create an angular modular plugin here.

Contact.

You have an idea? We handle all the rest

Drop us a line.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

USA

500 Grant Street, Downtown, Suite 2900,
Pittsburgh, PA 15219, USA

+1 (412) 475 9053

United Kingdom

Suite A12, 56 Wood Lane, London,
W12 7SB, UK

+1 (93) 606  7875

Pakistan

2 West Canal Bank Road, Lahore 54000,
Pakistan

+92 322 4524442

Project inquiries

hello@phaedrasolutions.com

it’s not about ideas
it’s about making ideas happen
Copyright 2022 - Phaedra Solutions.
All Rights Reserved