7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Dependency Injection

In this lesson, we’ll discuss what dependency injection is, and how Angular manages it. Along the way, we’ll review how it relates to the minification of our Javascript, and discuss using the module syntax to solve the problem.

4.2 Dependency Injection

In the last video, we took a look at the basic syntax for coding modules in Angular. In this video we're going to take a look at the rationale behind that syntax and a deeper look at dependence injection in Angular. Here I've got a very simple example of Angular with a controller around a diff with a name template and I've defined the value of the name, model inside my controller, the example controller. When we deploy JavaScript applications it's a best practice to minify the JavaScript so this would be in a separate file and we'd minify this down. But when minified we end up with something like this. Where the variable names have been squashed to make the code a little bit smaller. So I'll just show you what this looks like,we'd end up with b.name="Tom". This is a problem for angular, but before I explain why that is, I need to explain dependency injection. Dependency injection is the way by which Angular gets hold of dependency to a particular module, or controller in our code, and presents them to the controller for use. In this case, we're requesting scope from Angular and it's using dependency injection to figure out where to get scope from, and then supplying it to our function. So we don't have to care where it comes from. By default it does this by stringifying the function that is calling example.2string. And then figuring out what the names of the arguments are. Then matching those arguments up against modules or other bits of code defined elsewhere or in the angular source code. And then supplying them back to us so that we can use them. So in this example, Angular stringifies our example function and I'll show you what it does here. So I'm gonna consult log Example.2string. So I open up the console and clear the errors. And then just quickly refresh this. You can see we get function scope, and then the contents of the function. Angular uses this string to identify what the names of the arguments are. So, in this case, we'd end up with an array with just scope in it, like this. It then matches this array up against things defined elsewhere in the angular source code for example and then supplies them back to us. If I consult.log scope and show you what it sent passing us. You can see here that it's passing us an object that has all these properties against it, including the name that we've defined but also a whole load of others like watchers, listeners, and there's a whole other set in the pros type that's inherited. Remember its found this object, this scope object by looking at the arguments of the function. When we minify the code the argument to the function then becomes b and b wont match up against scope in the angular source code. We have to tell angular what exactly our dependencies are so that it can figure out what to give us. I've cleared the code out and now I'm going to show you one way of doing that. We define a property of the controller function, which is $inject. Angular checks this property when it carries out its identifying of the arguments, and if it exists, it doesn't bother stringifying the function, it just uses the array we supply. So in this case, if I wanted to not use the $scope variable, instead use s to identify scope, so I could do s you can see that this is broken. But if I specify a Scope in our Inject Array, you can see that now it's working again. This is because Angular has looked through this array. And identified that the first argument should be Scope. So it goes looking for Scope and returns an instance of it for us to use. But we're referring to it by the S variable. So if I simulate minify in this code by making the variable names in sequence and then I change the function that we're calling inject on and say that we want to use the A controller you can see that our app is still working. Even though we aren't using the scope variable here because the minify will never crush a string like this. Angular looks at the string and knows how to inject it. So how do we do this with the module syntax? Well I'll do exactly the same as I did before. Angular.module and call it my app. And declare that we don't have any dependencies. You can see there's an array here, and this array of dependencies is very similar to the value we set on the inject property of the controller. Then I'll create a controller and call it Example. You can see that this won't be minified which means we can keep the example controller in the ng-controller directive on the div that we're looking to control. Now before, you remember, I just created the function in here and again requested Scope within it, but we don't have a handle on this function. There's nothing to call .inject on. We would do this and say that we wanted the scope variable, and then we could use any variable name we liked. But we can't, because we don't have a handle on it. So instead we use a similar array syntax. We put the function in an array, so that now the signature of this controller method is string and then an array, and then we declare the dependencies in order before we declare the function so in this case I'll put scope here. And this tells Angular that the first argument to the controller function, which will always be the last item in the array, is Scope. And now we can refer to the Scope as s and I'll say, s.name = "Tom". And just finally, I need to add myApp to the ng-app attribute up here. So, myApp. And you can see it's now working. This code will minify absolutely fine because we've told Angular exactly what dependencies we want. It deals with going and finding where to get these from. But we've just told it exactly what it is we want and we can use any variable names we'd like to refer to it. Now that we have learned a bit about modules and dependency injection, we are going to take a look at some services and filters that angular gives us. In the next video we'll take a look at the location service that lets us modify and monitor the URL.

Back to the top