New version Angular 9

AngularJS Tutorial - 5 - Error handling

In this part we will discover services and factories with wich we will
manage the error handling.

Screenshot

Download

The source for this part is here: 05_errorservices.zip.

The samples can be run with Firefox, in general or by running, into the directory,

If you have Python 2.x: python -m SimpleHTTPServer 8000
If you have Python 3.x: python -m http.server 8000
If you have Perl:
- cpan HTTP::Server::Brick # install dependency
- perl -MHTTP::Server::Brick -e '$s=HTTP::Server::Brick->new(port=>8000); $s->mount("/"=>{path=>"."}); $s->start'
If you are under windows: "C:\Program Files (x86)\IIS Express\iisexpress.exe" /path:%CD% /port:8000

Services and factories

In angular is possible to define

services: Objects created once within the application life that contains
utility methods, variables etc.
factories: Methods that return a value or object, each time that that they
are included as dependencies they can be invoked.

Factory

For example a factory can be the following. The "Setup DateFactory"
is colled only once, hence the setup is executed only once.

module.factory('DateFactory',[ function() {
	console.log("Setup DateFactory");
	return function(prefix){
		var date = new Date();
		return prefix+date;
	}
}]);

When i include it as dependency in a controller i can invoke the
function returned.

customers.controller('CustomersController',['DateFactory',function(DateFactory){
	$scope.currentDate = DateFactory("prefix");
}]);

Service

An object is created, once, with the specific methods and variables exposed.
The "Setup DateService" is called only once, hence the setup is
executed only once.

module.service('DateService',[ function() {
	console.log("Setup DateService");
	this.prefixDate = function(prefix){
		var date = new Date();
		return prefix+date;
	}
}]);

When i include it as dependency in a controller i can invoke the
function exposed by the object.

customers.controller('CustomersController',['DateService',function(DateService){
	$scope.currentDate = DateService.prefixDate("prefix");
}]);

Making a service with a factory

I can also create the data service with a factory

module.factory('DateServiceFactory',[ function() {
	console.log("Setup DateServiceFactory");
	this.dateService = {
		prefixDate: function(prefix){
			var date = new Date();
			return prefix+date;
		}
	}
	return this.dateService;
}]);

And i will use it in the controller like the following. With this approach
i have still a singleton service.

customers.controller('CustomersController',['DateServiceFactory',function(DateServiceFactory){
	$scope.currentDate = DateServiceFactory().prefixDate("prefix");
}]);

Error Messages

We will creat a new module in its directory (app/common/module.js) with an
additional services.js file. We will add this module as dependency for
the customers module.

We will create a service to manage the messages in services.js.
Note the usage of the $rootScope. This is to ensure that ALL application
manage the messages consistently.

common.service('globalMessagesService', ['$rootScope',function($rootScope) {
	
	$rootScope.messages = [];
	
	this.showMessage = function(text,level){
		$rootScope.messages.push({
			text:text,
			level:level
		});
	}
	
	this.clearMessages = function(){
		$rootScope.messages = [];
	}
}]);

On the main page we will add the bindings for the messages. Note that
we found now that the rootscope is the one visible right after the
declaration of the ng-app!

<body ng-app="app">
	<div class="alert alert-danger"
         role="alert" data-ng-repeat="message in messages">
        <p>{{message.text}}</p>
    </div>
	<div ng-view></div>
</body>

Handling errors

To add error handling on the controllers we will add to them a dependency
form globalMessagesService.

On their constructor we will add the cleanup of errors. The same function will
be called as first line in update,delete and save methods.

	globalMessagesService.clearMessages();

Then after all calls to $http.succes(...) we will add the error management:

			succes(....).
			error(function(data,status,headers,config){
				globalMessagesService.showMessage("Error "+status,"error");
			})

Now going on a non existing customer detail we will see the error :)