Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Angular r 3
  • Overview
  • Transcript

4.1 Create a Service

In this lesson, I’ll show you how to set up a service to provide data (a list of users) for our app. This service will return a Promise.

Related Links

4.1 Create a Service

Hello everyone, I am Reggie Dawson, welcome to the Angular 2 Routing course for Tuts+. Now that we have added Routing to our app, we are going to get a little more in depth with the features that Routing offers us. For such a small app, it is really overkill for us to even have Routing. We will make it worthwhile for our app by adding some security features that prevent unauthenticated users from accessing certain areas in our app. Then we will create a list of users and use routing to navigate directly to a user from that list. In this video, we will set up a service with some mock data to use. This service will handle authentication as well as guard our routes. Before we get started, we will make a feature area inside of our pages folder. We do this to help organize sections of the project and allow us to add and remove parts without affecting the whole. Create a folder called devAdmin in the pages folder. This will be the admin area of our app. Inside this folder we will add another folder called shared. This is where we will store the files for this area that are used by multiple components. For example, this is where we will store our service and other utility files. First we will add a file called dev.ts in our shared folder. This will hold an interface for us to use with our data. Here we are using a typescript interface to provide a shape for the user data that we will have. In this case we have an ID that is a number and a first name, last name, and skills that are strings. Next we will create a file called mock-dev.ts in our shared folder. This will be the mocked up data that we will display in our app. The modular nature of Angular 2 makes it easy to swap out for a real data source later. First, we will import our interface. Then we will export an array called Dev. We will use our interface as the shape of the data in the array. Then we will add some objects to this array. Inside each object, we have values that match up with our interface. The ID is a number while everything else is a string. Make sure to quote the strings and add a comma after each object except the last one we add. After that, we can create a file called dev.service.ts in our shared folder. Now we really aren't going to add all the methods to our service now. But we will add them instead as we build out our feature area. First, we will add our imports. Here we have our injectable decorator which is how we create a service in Angular 2. This allows us to add this service through dependency injection to any component that we like. Then we add the Router and CanActivate from Angular Router. We will use the Router to navigate with our service. CanActivate is what we will use as a route guard. We will talk more about that when we configure out login page. Then we import our mock data. After that, we add the injectable decorator. Then we will add our class. As you can see we have added implements CanActivate. This specifies that this class will use CanActivate. You will see this with other methods in Angular 2, most notably the OnInit method, which we will use in a later video. Then we will add a userLoggedIn property. We will use this to track whether or not a user is logged in. Then we will add a Promise. Here we are using and then immediately resolved Promise against our array. We don't have to use Promises but they will make our life easier when returning data. If you aren't familiar with Promises, make sure to check out my Coffee Break course on them. I have added the links in the course notes. Then the last thing we will add for now is the constructor. Here we are pulling the router into our service so that we can use its methods. After that we are done with our service for now. In the next video we will configure our child routing and incorporate these routes into our app.

Back to the top