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.

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 Services

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.

The code for our whole page now should look like this.

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.



Gary Woodfine

Freelance Full Stack Developer at
Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.

Affiliate Disclaimer

Disclosure: Please note that some of the links included in the blog posts are affiliate links, which means I will earn a commission if you decide to make a purchase.

I only include affiliate links to products, services and companies that I have personal experience and have actually used. I only recommend them because they are helpful and useful, not because of the small commissions I make if you decide to buy something.

Please do not spend any money on these products unless you feel they are relevant, suitable and will help you achieve your goals.

Buying anyone of these products and the commisions earned will not make me an overnite multi millionaire, but they will help to cover the hosting costs and compensate for the countless hours and effort I put in to create meaningful and valuable free content I provide to help others succeed.

You've also undoubtedly noticed that I also use various advertising networks - unless of of course you're using an Ad blocker, this is also an attempt to reduce my monthly deficit I experience in providing free relevant, valuable and on occassion insightful content for the benefit of others.

I only really make some money if people click on the ads, unless of course you consider 1c per 1000 impressions real money!

Bear in mind just how many impressions I need to make before I can cover my £20 hosting costs a month!

If you are using an adblocker and guilt stricken you can of course donate using any of the buttons below, but I won't be holding my breath.

Buy me a coffeeBuy me a coffee