AngularJS : Dependency Injection and services

Developing software is complicated and while working on code you need to ensure that all the code you work is testable. This is true on any size project regardless of type, you need to ensure that quality and robustness of your code is high. In the fast paced world of mobile and web development users can be fickle and the smallest glitch will cause them to either delete your app or never return to your website again.

In software projects developers will attempt to write small re-usable units of code which they may term as components or services which will enable them to re-used through out the project. When reusing these components you will need to ensure you don't create dependency on any specific versions, due in part that you want to enable the developers of these components to update, enhance and fix bugs in these components without breaking the code you're working on.

AngularJS is powered by a dependency injection mechanism that manages the life cycle of each component. This mechanism is responsible for creating and distributing the components within the application.

Using concepts like dependency injection we can inject code or data that has been created outside of our unit of code to consumed inside it.

If you've been following along on with this tutorial and developing the simple To Do List application. ( source code is available on GitHub ) you will have noticed that we have been creating the sample json data directly within the controller.

.....
        todolist.controller("todoCtrl", function($scope){
 
 
            $scope.tasks=[
                {summary: 'Write Angular Tutorial', due: new Date('05/16/16'), done:Boolean(true)},
                {summary: 'Write Code for Tutorial', due: new Date('05/16/16'), done:Boolean(false)} ,
                {summary: 'Commit code to Github', due: new Date('05/16/16'), done:Boolean(false)},
                {summary: 'Write Data Handling Tutorial', due: new Date('05/19/16'), done:Boolean(true)},
                {summary: 'Write some Filters', due: new Date('05/25/16'), done:Boolean(false)},
                {summary: 'Implement Grunt', due: new Date('05/30/16'), done:Boolean(false)}
            ];
 
....

We're now going to update this code a little and we're going to make use Dependency Injection and create a service to deliver this data.

Creating Service

In AngularJS, a service is a singleton object that has its life cycle controlled by the framework. It can be used by any other component such as controllers, directives, filters, and even other services.

Creating services with the factory

The framework allows the creation of a service component in different ways. The most usual way is to create it using a factory. Therefore, we need to register the service in the application module that passes two parameters: the name of the service and the factory function.

A factory function is a pattern used to create objects. It is a simple function that returns a new object. However, it brings more concepts such as the Revealing Module Pattern

Our service is going to be a little contrived, but it will suit to illustrate the purpose.

<!DOCTYPE html>
<html lang="en" ng-app="todolist">
<head>
    <meta charset="UTF-8">
    <title>Geek I Am - To Do List</title>
    <!-- Import the angular JS from Google CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
        //Create a Geek Module
        var todolist = angular.module("todolist", []);
 
        //Register the geek controller to the geeks module
        todolist.controller("todoCtrl", ['$scope' , 'taskService', function($scope, taskService){
            //Call the service to get the data
            $scope.tasks= taskService.get();
 
            // Bind the add function to the scope
            $scope.add = function(task){
                $scope.tasks.push(angular.copy(task));
                delete $scope.task;
            };
 
 
        }]);
 
        // The Service implementation
        todolist.service('taskService', function(){
 
            var _get = function(){
 
                return [
                    {summary: 'Write Angular Tutorial', due: new Date('05/16/16'), done:Boolean(true)},
                    {summary: 'Write Code for Tutorial', due: new Date('05/16/16'), done:Boolean(false)} ,
                    {summary: 'Commit code to Github', due: new Date('05/16/16'), done:Boolean(false)},
                    {summary: 'Write Data Handling Tutorial', due: new Date('05/19/16'), done:Boolean(true)},
                    {summary: 'Write some Filters', due: new Date('05/25/16'), done:Boolean(false)},
                    {summary: 'Implement Grunt', due: new Date('05/30/16'), done:Boolean(false)}
                ];
 
 
            };
 
            return{
                get: _get
            };
        });
 
    </script>
</head>
 
<body ng-controller="todoCtrl">
<h1> To Do List</h1>
<table>
    <thead>
    <tr><th>Summary</th><th>Due Date</th><th><a href="#" ng-click="field = 'done';order=!order" >  Done</a> </th></tr>
    </thead>
    <tbody>
    <tr ng-repeat="task in tasks | orderBy:field:order">
        <td>{{task.summary}}</td>
        <td>{{task.due | date:'dd-MMM-yyyy' }}</td>
        <td><input type="checkbox" ng-model="task.done" /></td>
 
    </tr>
 
    </tbody>
</table>
<form name="taskForm" ng-submit="add(task)"  >
<input type=text" ng-model="task.summary" name="summary" ng-required="true" placeholder="summary" />
<input type="date" ng-model="task.due" name="due" ng-required="true" />
<input type="checkbox" name="done" ng-model="task.done" />
    <button  type="submit" >Add</button>
</form>
 
 
 
 
 
</body>
</html>

Summary

This is a really simple example of Dependency Injection in AngularJS. Although it illustrates the point well enough it does open up some questions I am sure the observant among you may be asking, like why create a service if everything is all located in one file? You can't create unit tests for this due to it all being in one file! These are great questions which leads us nicely to the next tutorial, which is involves refactoring our application using some AngularJS best practices and structuring our project better.

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.