Our application needs a way to send and retrieve data from the server. In this video we'll create a EntryService to bridge the communication between the front end and the back end.
In this video, we'll build on what we've learned, and create a service which we'll 0:00 use to communicate with our backend server through the newly installed http module. 0:04 Services provide a way for separating business logic from components. 0:10 When developing large applications, 0:15 you may need to represent the same data in a variety of ways across the application. 0:17 Placing business logic in services, helps your application stay dry. 0:22 Dry is a concept of reducing the lines of code by not repeating yourself. 0:27 If we're building a music app, we'd likely have a catalog service. 0:31 Which would handle the retrieval of track information and songs from the server. 0:36 Consider the following components. 0:40 The library needs to get the list of tracks from the back end, but only needs 0:42 to get enough information to list the track like the artist, title and duration. 0:47 The playlist is just a way to organize your tracks. 0:52 And doesn't need to communicate with a backend server. 0:56 The player needs to get the audio file for the track from the server and play it. 0:58 The library and the player don't need to know how the catalogue service works. 1:03 Only that the catalogue service provides those components 1:07 with the information they need individually. 1:11 Our entry to this component needs entries for a backend server. 1:14 In the last video, we added the http service to our entryless component. 1:18 Our component shouldnt be concerned with retrieved entries directly. 1:24 Instead, we'll delicate that to an entry service. 1:28 Let's remove the code we added in the last video. 1:32 We'll need the constructor, so go ahead and leave that. 1:35 But make sure it's empty. 1:39 Don't forget to remove the import from the top of the file. 1:41 Because our service is specific to our entries, 1:46 the entry service file will live in the entries directory. 1:49 Because the service will be shared by entry and entry-list components. 1:53 We should share that in a shared folder. 1:58 So I'm gonna create a shared directory in the entries directory. 2:02 Now let's add a new file called entry.service. 2:08 Dot T S. 2:14 Make sure that you've put it into your shared directory. 2:16 Let's make a new class called 2:20 EntryService. 2:24 The minimum requirements for a service in Angular is it needs to be 2:29 a class and have the @injectable decorator applied to it. 2:35 The injectable decorator is Angular's marker to make sure that 2:41 the class is available for dependency injection. 2:44 Now, let's import the injectable decorator. 2:48 The injectable decorator is part of Angular's core package. 2:51 We can then decorate our service with the injectable decorator. 3:00 We need to export our entry service before we can use it. 3:06 Our service is ready to be registered with our app module. 3:11 But before we do that, let's add this new file to our entries barrel. 3:15 Remember a barrel is a single file that exports 3:21 all of the directory's components and services. 3:25 Open up the index.ts file in the entries directory and 3:28 then add a new line at the top of the file and export the entry service. 3:31 Now, open the up the app.model.ts in the app directory. 3:43 We need to add a reference to the entry's line to import the entry service. 3:47 Entry module has a special place for services. 3:53 They provide us property. 3:56 We'll use the provider's property, and 3:58 add an array of services that we want our application to use. 4:01 We'll add the EntryService to the providers array. 4:06 Adding the service to the providers array lets angular know about the service when 4:12 the app is compiled. 4:16 Angular then makes the service available to use in 4:17 components through dependency injection. 4:20 Providers are not components, but 4:23 they are classes decorated with the injectable decorator. 4:25 If you forget to include the service in your provider's array, 4:29 Angular may not compile your application. 4:33 So we've created our entry service. 4:35 Now let's create a getEntries method on the entry service. 4:38 The getEntries method will use Angular's HTTP service 4:43 to fetch data from the server. 4:47 TypeScript will infer the return type of the method, but 4:49 I like to explicitly define the type upfront, so 4:53 I can get a visual indicator when everything is working correctly. 4:55 I know that the getEntries will return a promise 5:00 which will eventually resolve to an array of entries. 5:02 To define this I first need to know what an entry consists of. 5:06 In the shared directory, I'm going to 5:10 create a new file called entry.model.ts. 5:15 We can copy the EntryComponent class and paste it into the model TS file. 5:33 Remove the place all he values. 5:44 And change the class name to Entry. 5:59 Now we have a solid structure, and can define our return type in our service. 6:02 In the entry service TS file, I'll import the new model at the top of the file. 6:08 Then, I can set the return type for get entries. 6:31 Typescript can in further return type of function if it is not specified. 6:35 A lot of times you might not immediately know what the expected return type 6:40 might be. 6:44 To define the return type, we add a colon after the parenthesis and 6:45 then the type definition. 6:49 In our case, we know that the getEntries method will return and array of entries. 6:51 Let's define that now. 6:56 Typescript is indicating that I have an invalid return type. 6:58 This is because the type I defined doesn't match the actual type return by 7:01 the method. 7:06 The EntryService needs a constructor function so 7:06 we can inject the HTTP Service just like we did in the other video. 7:10 We need to import the HTTP service at the top of the file. 7:18 Now in the getEntries method. 7:28 I need to call injected HTTP service. 7:31 Before I can do that I need make sure that 7:35 the HTTP service is available through out the entry service. 7:38 By default injected services are only assemble in the constructor function 7:42 by pre-fixing the perimeter with the keyword private or public. 7:47 We can expose the HTTP service to the entire service. 7:56 I prefer to the use the private keyword. 8:00 But, public works the same in this situation. 8:02 If you're curious about private and 8:06 public keywords, I've included some information in the teachers notes, okay. 8:08 We can now use this http service through out our EntryService, 8:13 in the getEntries method I can call the http service and 8:17 i can pass in the URL for the entries API and 8:23 the return a Promise, the response object has a lot of interesting information. 8:28 But ultimately we'll need to parse the JSON returned by the server. 8:34 In fact arrow syntax, if don't wrap the body of you're callback function in 8:39 curly braces, the expression on the right is just returned. 8:44 I'll go ahead and call the JSON method on the response. 8:48 And then pick out the data object from the response. 8:56 Then I'll define the type of the data object by using the type script as 9:00 operator and send the type to the return value to an array of entries. 9:06 The method looks how we want it be but the return type is invalid. 9:15 Looking at the error message by TypeScript, 9:20 we can see that what we defined as the return type 9:23 doesn't match the actual return type from the return statement. 9:26 The actual return type specifies a generic type of a promise 9:30 That will be returned by your function. 9:33 And in the promise, will be an array of entries. 9:36 Generics are a special kind of type definition, which lets you apply 9:39 a common set of attributes to any number of existing type definitions. 9:44 Spotting a generic is easy. 9:49 They begin with a type, in our case it's a promise. 9:51 Followed by a sets of angle brackets concerning under the type. 9:56 We'll put the Entry rate of definition inside the angle brackets. 10:02 Now, the getEntries return type is valid. 10:06 You'll find more information about generic types in the teacher's notes. 10:10 Our service is coming along nicely. 10:14 Next video we'll inject the entry service into the entry list component so 10:16 that our blog will have real photos and not a single placeholder. 10:21
You need to sign up for Treehouse in order to download course files.Sign up