var app = angular.module('plunker', []);
app.config(function($provide){
// $provide provider is used to register the components in angular internally.
// use decorator to customise the behaviour of a service.
$provide.decorator('$exceptionHandler', ['$delegate', function($delegate){
// exception: exception associated with the error
// cause: optional information about the context in which the error was thrown.
return function(exception, cause) {
exception.message = 'Please contact the Help Desk! \n Message: ' + exception.message;
// $delegate: provides the original service to the method which is used to call the base implementation
// of $exceptionHandler service which internally delegates to $log.error.
$delegate(exception, cause);
alert(exception.message);
};
}]);
});
app.controller('MainCtrl', function($scope) {
$scope.cancelBtnText = 'Cancel Editing';
$scope.cancelForm = function(){
$log.info('user requested to cancel the form!');
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3><a href="#">http://www.siddharthpandey.net</a></h3>
<h3>Learn how to handle exceptions in AngularJS using $exceptionHandler service</h3>
<input type="text" disabled="disabled">
<button data-ng-click="cancelForm()">{{cancelBtnText}}</button>
</body>
</html>
/* Put your css in here */