angulartypescriptdependency-injectionangular5

How dependency injection in Angular is useful since it doesn't solve anything apparently?


How this can improve my code? How it can remove dependency ? I still don't see any benefit of using this ?

@Component({ 
  selector: 'talk-list', 
  templateUrl: 'talks.html', 
  providers: [TalksAppBackend] 
}) 
class TalkList { 
  constructor(backend:TalksAppBackend) { 
    this.talks = backend.fetchTalks(); 
  } 
}

If i had used

TalksAppBackend t= new TalksAppBackend(); that would have been the same. Apart from syntactical difference how different it is?

Update:

Also, it's calling .fetchTalks(); that's not mocking. How its possible?


Solution

  • If you don't use Dependency Injection

    The main difference is that if you don't use DI (dependency injection) then your code MUST know how to create all of its dependencies. You may have tons of components using tons of services. The services may rely on other services, like TalksAppBackend may require HttpClient service. And your code must create dependencies for its dependencies. Like

    TalksAppBackend t = new TalksAppBackend(new HttpClient())

    And every your component must do that, creating a new instance of the TalksAppBackend and an instance of HttpClient. And if later the TalksAppBackend will require some logging service, you must update manually all your components to instantiate all the deps for TalksAppBackend. Such code is hard to maintain and it uses more memory than it should because it doesn't share instances.

    If you use Dependency Injection

    You just specify the module or a component which is responsible for creating instance of desired dependency. It will take care of it's dependencies as well. You components may just specify the desired class TalksAppBackend to be injected and should not care about whether or not it requires HttpClient or Logger or whatever. The DI does that job. And you have a fine control over it: a global service which is provided by a module will be instantiated just once. So your components can share the same instance. And if you want to you may provide it on a component level so that many instances may be created and children components will have access to the only one instance that is needed.

    And this approach also opens a way to mock dependencies and provide not the real TalksAppBackend service but rather a mock with fake answers that does not require network communication and running back-end to test if your component interprets the results accordingly. And you can do it without modifying the code of your component. So in this approach the component is focused for doing the thing it should do ONLY.