How Does Angular Do Dependency Injection?

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 AngularJSMaster 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.