Dependency Injection

Dependence injection is not a new concept. 0:00 A lot of frameworks take advantage of this common design pattern. 0:03 Imagine I were writing a book. 0:07 I've read enough books to know, that a book needs a cover and some pages. 0:09 If I weren't using dependency injection, my code would be very rigid. 0:13 The pages were created at a paper mill. 0:18 The paper was created from trees. 0:21 And the trees need water and sunshine to grow. 0:23 Rather than the book knowing its origin, and how to reproduce itself. 0:26 The factory assembles the book. 0:30 Dependency Injection is like a factory, 0:32 kindly creating services where we need them. 0:35 In an Angular application, 0:37 dependency injection creates a singleton of a given service. 0:39 This comes in handy when you have multiple areas of your application, 0:43 that need to communicate with each other. 0:46 To demonstrate how dependency injection works in our application. 0:49 We're going to set up the HttpModule, to retrieve entries from the server. 0:53 Go ahead and set up your dev server now, if you're not already up and running. 0:58 Now, open up the entry-List.component.cs file. 1:02 Before we can start using dependency injection on this component, 1:07 we need to add a constructor function. 1:10 Angular uses the constructor function, to instantiate the components and 1:13 wire up our dependencies. 1:17 Next, we need to import the Http service. 1:20 The Http service, is an interface for sending and 1:24 receiving data from a backend server. 1:27 When we were adding the Http module to our Ng module configuration in the last video. 1:30 We made this Http service available throughout our application. 1:36 Notice we're importing Http the service, not Http the module. 1:40 Now we'll assign the Http service as a perimeter in the constructor function. 1:47 Be sure to define the type as the imported Http service. 1:52 Inside the constructor function, 1:57 we can test out the Http service to make sure it's working. 1:59 We'll add a new line and at the start type Http. 2:03 As I type, intelligence is helping guide me, 2:09 to what methods are available on this service. 2:12 I'm going to choose get. 2:15 The methods on the Http service returns an observable. 2:17 I won't be covering up observables in this course. 2:22 To find out more information about observables, check the teacher's notes. 2:24 Let's convert this into promise. 2:28 We can do this by appending the toPromise function. 2:31 Then, we can chain the then method with a success. 2:35 And a failure callback. 2:44 I've just debugger statements in here for now. 3:02 Save the file and head back over to the browser. 3:07 The debugger break point has been hit. 3:11 The request returned a four row fault, 3:14 which means we currently don't have the back end server. 3:17 We'll tackle this problem a little later on in the course. 3:20 To see what dependency injection is really doing for 3:23 us, right click on the Http definition. 3:26 And click Go to Definition. 3:31 The Http service, 3:34 has a set of dependencies as defined in the constructor. 3:35 The consumer of this service, because of dependency injection isn't concerned 3:40 about these dependencies, because Angular will provide them for us. 3:45 Our entry list component only needs to specify what it needs. 3:50 The Http service. 3:54 Then the Dependency Injection system can handle the rest. 3:57 Dependency Injection is pretty cool. 4:01 In the next video, we'll make good use of our Http service. 4:03 See you there. 4:07