Introduction
In my last article I explained the $timeout in AngularJS.
This article explains the $exceptionHandler service provided by AngularJS.
AngularJS provide a service by which exceptions can be handled, if any exception occurs then AngularJS provides an error message that will show that an error has occured.
I will create a simple application that will help you understand this service in a better and easier way.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a JavaScript function (that is the important part of this application) as in the following:
<script>
var x = angular.module('except', []);
x.factory('$exceptionHandler', function () {
return function (exception, cause) {
alert(exception.message);
};
});
x.controller('cont', function ($scope) {
throw { message: 'error occurred' };
});
</script>
Here I took a variable "x" in which angular.module is defined. After this factory function is used, the factory function can be used for dependency injection of services but here it will just create an instance of a service whenever it is called. The service used is $exceptionHandler. In this service we need to provide two things, the first is an exception and the second is a cause, the cause is optional and contains information about the context in which the error was thrown.
After this a controller is created named cont, in this controller the error message is provided.
Now our work on the View is completed so we can work on the ViewModel.
Step 3
<body>
<form id="form1" runat="server">
<div ng-app="except" ng-controller="cont">
</div>
</form>
</body>
Here I have created a simple Div that is bound to the controller and app both.
So whenever we run our application and the div loads then it will show the error message because it is bound to the controller and no condition is provided for an exception to occur.
Now our application is ready to for execution.
Output
On running the application you will see that an error message will be shown when the page was loading:
![exception handler in angularjs]()
As you click on "OK" a blank page will be displayed because we have not provided anything in the body section, just a div was created that was also blank.
The complete code of this application is as follows:
<html ng-app="except" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
var x = angular.module('except', []);
x.factory('$exceptionHandler', function () {
return function (exception, cause) {
alert(exception.message);
};
});
x.controller('cont', function ($scope) {
throw { message: 'error occurred' };
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="except" ng-controller="cont">
</div>
</form>
</body>
</html>