Dependency Injection with AngularJS Services

Hello Frnds,

Today we are going to discuss about dependency injection with AngularJS Services. It sounds interesting, Isn't it?

This post is the continuation of my previous post " CRUD with AngularJS and ASP.Net Web API".

So in case if you have not gone through that I would suggest please go through that.

What is Dependency Injection(DI):

In short & simple, It's a way to inject the dependencies. 

In detail, dependency injection is a software design pattern that implements inversion of control for software libraries. Caller delegates to an external framework the control flow of discovering and importing a service or software module specified or "injected" by the caller (source: http://en.wikipedia.org/wiki/Dependency_injection).

Dependency Injection is available through out the AngularJS. You can use it with Services, directives, filters, and animations etc. 

For more detail refer this: https://docs.angularjs.org/guide/di#

As I said DI can be used with services, So here I am going to explain you how you inject a service within a service. I am gonna use the same example here which I have used in my last post. In order to proceed I am going to do some changes in the example (used in previous post):

Change 1: Small change in our business model class "Book".

public class Book

    {

        public string Id { get; set; }

        public string Name { get; set; }

        public string Author { get; set; }

        public decimal Price { get; set; }

        public decimal OfferPrice { get; set; } //This is new property which we are adding.

    }

Change2: Define a new AngularJS service class, by adding a new script file "BookngDiscountService.js" under Scripts=>BookngScripts folder.

app.service('bookDiscountManageService', function () {

    this.getDiscountOnBook = getDiscountOnBook = function (bookPrice) {

        if (bookPrice >= 500) {

            return bookPrice * 10 / 100;

        }

        else {

            return 0;

        }

    }

});

What this service does is, it defines a service method to decide discount based on some logic on MRP of book. Very simple isn't it?



Change 3: Modify the view to accommodate to show Price after discount (let's call it OfferPrice).

<table style="border: solid 2px Black; padding: 5px;">

                    <tr style="height: 30px; background-color:lightsteelblue; color: maroon;">

                        <th></th>

                        <th style="width:50px">ID</th>

                        <th style="width:150px">Name</th>

                        <th style="width:150px">Author</th>

                        <th style="width:100px">MRP Price</th>

                        <th style="width:100px">Offer Price</th>

                        <th style="width:50px"></th>

                        <th style="width:50px"></th>

                    </tr>

                    <tbody ng-repeat="book in Books">

                        <tr>

                            <td></td>

                            <td style="width:50px"><span>{{book.Id}}</span></td>

                            <td style="width:150px"><span>{{book.Name}}</span></td>

                            <td style="width:150px"><span>{{book.Author}}</span></td>

                            <td style="width:100px"><span>{{book.Price | currency}}</span></td>

                            <td style="width:100px"><span>{{book.OfferPrice | currency}}</span></td>

                            <td>

                                <input type="button" id="Edit" value="Edit" ng-click="get(book)" />

                            </td>

                            <td>

                                <input type="button" id="Delete" value="Delete" ng-click="delete(book)" />

                            </td>

                        </tr>

                    </tbody>

                </table> 

Change 4: I am going to inject my new service (bookDiscountManageService, defined in change step 3) to my existing service called "bookManageService" (defined in earlier post, BookngService.js).

So here is change we need to do in "bookManageService" to inject our new bookDiscountManageService into bookManageService service.

app.service('bookManageService', function ($http, bookDiscountManageService) {

....

....

}

Highlighted piece of code in above line is the change, and it means that our bookManageService is dependent on another service bookDiscountManageService which is being injected to this service.

Now I want to use the service method 'getDiscountOnBook' of bookDiscountManageService service to update OfferPrice of the book by calling it inside 'getAllBook' service method of 'bookManageService' service. This how we need to modify the code:

//Fetch All Books

    this.getAllBook = function () {

        return $http.get("/api/BookAPI").success(function (data) {

            $.each(data, function (i, item) {

                item.OfferPrice = item.Price - bookDiscountManageService.getDiscountOnBook(item.Price);

            });

        })

    }

Highlighted piece of code shows the change part. What it means is, After getting data from ASP.NET Web API, it calls the injected service 'bookDiscountManageService' to calculate the discounted price.

This is it. Now think about it How easy to achieve the dynamics of OfferPrice without doing any change in ASP.NET Web API or AngularJS controller or in the main AngularJS service. 

After this change here is UI which you will get:

Thank You for reading. Don't forget to like it and feel free to give your feedback/comment.