Use Dependency Injection with ES6 and Angular
In this lesson, we are going to talk about dependency injection in an Angular application in ES6. There is a gotcha that I want to point out that most people will run into especially if they have not spent a lot of time using a classical language. We will start with a contrived example and then anchor it back into our application when we modify our CategoriesModel to use the $q service to return a promise.
[00:00] In this lesson, we are going to talk about the Dependency Injection in an Angular application using ES6. There's a [inaudible] that I want to point out that most people will run into, especially if they've not spent a lot of time using classical languages.
[00:15] I want to start by showing a contrived example, and then we will anchor it back into our application. I'm going to start by creating an add method that accepts a category parameter.
[00:30] Within this method, we're not actually going to do anything because that is not important, but what we're going to do is create a second method called return category that we want to return the value of the category sent into the add method.
[00:46] Obviously, this is not going to work because category is not available within the return category scope. We can try to fix this by adding this.category, and so now it's scoped to the category's model class. But then again, the category parameter itself -- and this is important -- is only scoped to the add method. So what we have to do for this to work is go this.category = category, and assign category to an instance member.
[01:14] Keeping that in mind, let's go ahead and delete that. We're going to inject the $q service. What we want to do is use the $q service outside of the constructor. How we do this is by assigning q to a local number, so this.q = q.
[01:37] Then from there, we can create a getCategories method that will return a promise that is resolved with this.categories. We'll go return this.q.when, and then we'll go this.categories. We can see that within the getCategories method, we are referencing the $q service as well as categories by scoping it to the class using the this keyword.
[02:07] Let's hop into our categories controller and change this around so that we're calling the service and operating on the promise. Categories model.getCategories. From there .then, and then we'll go result using the fat arrow, this.categories = result.
[02:31] Then we can hop into the browser. We can see that this is indeed working. The only difference is is that now where our controller is working with a promise and not accessing the category's service directly to get the categories, which in this case is totally fine.
[02:48] Then from here, the main point of this lesson is that we are injecting the $q service, but then we have to assign it to a local instance so that we can use it outside of the constructor. This is something to keep in mind when using dependency injection within an Angular 1 and even in Angular 2 application.