<!DOCTYPE html>
<html ng-app='ngMsgDemo'>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src='http://code.angularjs.org/1.3.0-beta.8/angular-messages.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='MasterController'>
<h1>Hello {{welcomeMsg}}!</h1>
<hr/>
<strong>Use Case - Ajax Calls</strong>
<br/>
<br/>
<button ng-click='demoAjaxCall()'>Make a ajax call</button>
<div ng-messages='ajaxRequest'>
<div ng-message='error'>An Error Occured!</div>
<div ng-message='success'>The request was a smashing success!</div>
<div ng-message='inProgress'>Please Wait!</div>
</div>
<div>
<textarea name="ajaxData" ng-model='data' rows="8" cols="40" placeholder='Ajax Call data Will Appear Here'>
</textarea>
</div>
<hr/>
<strong> Reusing and over-riding messages</strong>
<br/>
<br/>
<form name='demoForm'>
<div>
<label for='email'>Email:</label>
<input type="email" name="email" id="email" placeholder="Enter your email" ng-model='form.email' required/>
<div class='formMessage' ng-messages='demoForm.email.$error' ng-messages-include='messages.html'></div>
</div>
<div>
<label for='password'>Password:</label>
<input type="password" name="password" id="password" placeholder="Enter your password" ng-model='form.password' ng-minlength='5' ng-maxlength='15' required/>
<div class='formMessage' ng-messages='demoForm.password.$error' ng-messages-include='messages.html'>
<div ng-message='minlength'>This is not a secure password!</div>
</div>
</div>
</form>
</body>
</html>
// Code goes here
var app = angular.module('ngMsgDemo', ['ngMessages']);
function MasterController($scope, $timeout) {
$scope.welcomeMsg = 'AngularJS Messages';
$scope.ajaxRequest = {
error: false,
success: false,
inProgress: false
};
$scope.demoAjaxCall = function(){
$scope.ajaxRequest.inProgress = true;
$timeout(function(){
$scope.ajaxRequest.inProgress = false;
$scope.data = 'This is the data from Ajax Request';
$scope.ajaxRequest.success = true;
}, 5000);
};
}
/* Styles go here */
.formMessage {
position: relative;
top: -20px;
left: 200px;
font-family: monospace;
color: blue;
}
<div ng-message='serverError'>Request Failed Due to Server Error!</div>
<div ng-message='notFound'>Not Found!</div>
<div ng-message='inProgress'> Please Wait! </div>
<div ng-message='required'> This field is required! </div>
<div ng-message='minlength'> This field is too short!</div>
<div ng-message='maxlength'> This field is too long!</div>
<div ng-message='email'> Email is not valid!</div>