How Does Angular Do Dependency Injection?

Anthony Alicea
A free video tutorial from Anthony Alicea
Software Developer, Architect, and UX Designer
4.6 instructor rating • 8 courses • 278,260 students

Lecture description

How does AngularJS accomplish dependency injection? Understanding how will help you use it correctly.

This lecture contains downloadable source code. Download the file below and unzip (or extract) it.

Learn more from the full course

Learn and Understand AngularJS

Master AngularJS and the Javascript concepts behind it, design custom directives, and build a single page application.

06:51:33 of on-demand video • Updated September 2020

  • Learn fundamental Javascript concepts that power AngularJS.
  • Write quicker, better AngularJS code by discovering how AngularJS itself is built.
  • Become fluent in AngularJS terminology, such as dependency injection, services, directives, transclusion, and more.
  • Realize the power of dependency injection, and how AngularJS accomplishes it.
  • Design custom directives and save time and energy with easily reusable components.
  • Understand what a Single Page Application (SPA) is, and how they work.
  • Build a Single Page Application (SPA) in AngularJS.
  • Be the coder that explains AngularJS to everyone else, because you understand it better than anyone else.
  • Get new free lectures during 2015, keep up with the development of AngularJS 2.0, and get a MASSIVE discount on a future AngularJS 2.0 course in 2016!
English So how does Angular do dependency injection? So I'm gonna show you something that you probably will never, ever need to actually use, but It's good to know what's happening. So Angular is object, right, that's created. All part of that angular.js file. And it has an ejector with a method called annotate. And I'm going to pass it my function search people. Actually, let's console.log this so you can see it. So this feature inside of angular, I can pass it a function, and let's see what I get. Wow look at that. It parsed the string. And created an array, one for each parameter. The name of the parameters that the function expects. So if you think about it, if a function contains a certain name. That angular say hey, I know that name. I know that if I see that I should create an object and pass that object in that spot to that method. That means I could actually put it wherever I wanted in the function and Angular JS's code would simply say, hey there it is, and I'll pass it right there. I'll inject it, dependency injection. I'll pass this object that I create to that spot in the function. And that's what happens here, up in the controller. So, if I console.log the scope, you can see that this scope object was created and passed to the controller function because angular looked at the controller function, parsed out what its parameters were, and realized hey, one of those is scope so I'm going to create scope and inject it pass it to the function. This is extremely powerful. This means all you have to do is put the name of the variable correctly, the name of the object correctly in your function and you'll get it. Scope is a service that's a part of the core angular modules, but there are others as well and they also can get past to your function simply by putting them in the list. So this is an incredibly powerful feature, and really saves us a lot of time, and also makes our code more testable, more verifiable, more stable. And that's what I do in JS's structure is doing for you.