Angular Dependency Injection Project coding - Introduction

As we know about Dependency Injection in detail like what is DI, where to use it and what is its significance? So in order to understand Dependency Injection with real world project, let’s start coding from scratch to create a mini website. This mini website is nothing but a retail website which is selling various items. In this we have one Orders page where we have couple of line items and in each line item we have to change price & quantity and ultimately it will reflect in total price automatically.

We will start with simple things but may be in future it can get more complex like we may need to apply special discount coupons on certain items, arrange line items by state and so on. So rather than creating these line items as a component , we will create them as a service because more we push business logic towards service more our application will be stable. It will also be helpful when we upgrade our angular as there will be less impact.

As per Hierarchical DI, we will create one Line item service which has independent instances at each line item and they all will talk to Order service which will commit changes into database. All this is well explained in our video tutorial Angular Dependency Injection | Sample App | Tutorial  Snapshot below:

Similarly we will try to understand few more concepts through this project. At the end of this project implementation we will learn below topics incrementally:

• Hierarchical DI
• Console Logger
• Http Logger
• How to Inject the base URL: Provider usage
• Mini logger with one Log function