AngularJS Made Easy, by Example – Part 5; Factories & Services

The fifth part of a series on rapidly learning the AngularJS JavaScript framework. Today I illustrate the use of Factories to manage Ajax requests between my Controllers and my server-side code.

AngularJS provides three patterns for users to encapsulate what we might term “library functions”, such as data access. The three ways are Factories, Services and Providers. You can study the specifics of the individual types at the AngularJS website, and there are hundreds of posts out there on the internet discussing the merits of each – to cut to the chase; I use Factories. In the vast majority of cases it’s a choice between using a Factory or a Service, the key difference being that a Factory should be used to return a JavaScript object, and a Service should be used to return an instantiatable JavaScript function. Using Providers is a little more involved, and thus for someone attempting to learn AngularJS at light speed I avoid them like the plague.

My most common use case for Factories is to house Ajax requests. In the Factories folder (which I set up back in Part 1 of this series) I add multiple JavaScript files, one for each of the “topics” of my Factory functions. For example, in my example e-learning application I start with three files, with more to be added later:

Factories
	studentfactories.js
	teacherfactories.js
	userfactories.js

In each file I declare a Factory within the module I created in Part 2 of this series (called “app”). Within this object I create an anonymous function, which returns a JavaScript object containing my Factory functions. Some might prefer to place only one function inside each Factory, whereas I prefer to group functions acting on similar data under a single Factory heading (in this case – slightly confusingly – I prefer to name the Factory with a pluralisation, e.g. “TeacherFactories”).

Here’s a sample of “teacherfactories.js”:

app.factory('TeacherFactories', function ()
{
	return {
		GetTeachingClass: function (prmTeachingClassId)
		{
			var method = '/Teacher/GetTeachingClass';
			var parameters = { 'prmTeachingClassId': prmTeachingClassId };
			var requestType = 'GET';
			var comms = new ajaxRequest();
			comms.Init(method, parameters, requestType);
			return comms;
		},
		GetTeachingClassStudents: function (prmTeachingClassId)
		{
			var method = '/Teacher/GetTeachingClassStudents';
			var parameters = { 'prmTeachingClassId': prmTeachingClassId };
			var requestType = 'GET';
			var comms = new ajaxRequest();
			comms.Init(method, parameters, requestType);
			return comms;
		},
		PostSaveStudentSubjectThresholds: function (prmStudentId, prmSubjectId, prmLowerThreshold, prmUpperThreshold)
		{
			var method = '/Teacher/PostSaveStudentSubjectThresholds';
			var parameters = { 'prmStudentId': prmStudentId, 'prmSubjectId': prmSubjectId, 'prmLowerThreshold': prmLowerThreshold, 'prmUpperThreshold': prmUpperThreshold };
			var requestType = 'POST';
			var comms = new ajaxRequest();
			comms.Init(method, parameters, requestType);
			return comms;
		}
	};
});

(NB. The type ajaxRequest is a custom Ajax wrapper that ultimately returns a promise.)

The functions return a jQuery Promise, which will then be resolved inside the Controller that calls the Factory function. To make use of a Factory within a Controller it must be injected in, which was shown back in Part 4 of this series.

In the next article in this series I’ll be describing the use of animations, and give an example of using one to soften the transition between View changes.

Back to Top