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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Dependency Injection and Services

In this lesson, you are going to learn how to inject a service into your components. You’ll also see how to display the data you get from that service and even write an input component to add new data to the service.

2.4 Dependency Injection and Services

Hello everyone, this is Reggie Dawson. Welcome to the What's New in Angular 2 Course for Tutsplus. In this video, we will talk about dependency injection, services, and a few other goodies from Angular 2. Dependency injection is when we use external sources in a component. For example, we could have used an external data source to provide a list of frameworks in our component. And speaking of data sources, in Angular, we would normally use services to provide data to our app. Services are useful since they can be plugged into any component. In Angular 2, services still exist, but there is no special configuration for our service. We just create a class in TypeScript, or a function in JavaScript. Let's open up our TypeScript example. The first thing we need to do is create a new file for our service. Typically we want to have one class per file, so in a real world situation our components would exist in their own files. Create a file called myservice.ts in your App Folder. >> Open up the file and the first thing we are going to do is to add our class. The export allows the file to be loaded by system js. After we have our class, let's add an array. Here we are creating an array called my Info. As you can see, we are typing it to an array that will contain strings. Then we have Angular2, jQuery, and JavaScript as values in our array. Angular 2 still works great with arrays. Just like angular, as long as we grab our data as an array we can do whatever we want with it. This makes displaying lists of data simple with the built in tools provided in Angular 2, but we will get to that in a minute. That's all we need to set up our service. In a real application, this information will probably come from a remote server of some type. After we have our service, it's time to add it to our component. Let's go back to app.ts. The first thing we need to do is import our service. Here we are using system js to import our service. The my service in curly braces is importing the class that we exported, while the dot forward slash my service is pointing to the actual file. Again, we don't have to add the GS extension. And of course we don't even have my service.gs yet, but we will once we compile our files. The final thing we need to do is add the service to our bootstrap. This makes the service available to all components for use. To use the service in our component, we have to add it to our component's constructor function. Once we have our service, we normally have to incorporate it into our component. Now if we don't do this and try to assign our variable to our component, it won't work. First let's remove the level message in skill and replace it with myservice.myInfo, which we know is pointing to our array, then remove the my skill type definition and the my skill property from the constructor. Then we're going to add a console log and we're going to remove this line. Finally we are going to remove my framework from the ts component. Now save, compile and preview. When we preview the app we don't get anything from our array as expected, but if we look in the console we can see our returned array. We knew this would happen if we didn't assign the service to a variable. Instead of assigning it the way we normally would, type script has a shortcut to make this work. Let's go back to our app.ts. All we have to do to make this work is add the public keyword to our service in our constructor. After that, we can use the service without assigning it. If we save and preview now, we can see the values of the array. Right now it isn't that bad, but what if our array had a lot more items in it? We need a way to display our content as a list. That is where the ng for directive comes in. As before, Angular comes with a lot of built in directives. The ng for directive allows us to loop over a list and display the content. This has never been easier than with Angular 2. Go back to at.ts. First we have to import ng for. Remember we have to import anything we need from Angular 2. >> Then we add ng for as a directive on the sub component element. Once we do that, of course, the ng for directive has been included in our component. Then we can wrap our h2 tag in our template in a div. >> Then we're going to add the ng for. When using ng for, you use the asterisk to tell the directive to wrap your template. Without it, we would have to wrap our div and template tags. Then we add pound sign info of myService.myInfo. The pound sign info is a template variable we use to hold items from our array. MyService.myInfo is our array, of course. Remember I told you it was easy to work with arrays in Angular 2? After that, we need to change MyService.myInfo to info. As we loop over the array, info will be used to access the values. Save, compile, and preview. Now our data is much more readable, and capable of handling large lists. And speaking of data, wouldn't it be nice if we could add to our list of frameworks to learn? Let's go back to app.ts. We're going to add another div to the template in our sub component. Inside this div, we are just going to add an input. First we will add a template variable for the input. Before when we used our template variable, we were using it to refer to the data in our array. This time we are using it to reference our input. Next, we are going to use angular event binding. In Angular 2, binding an event is as simple as adding the event in parenthesis. For example, this will bind this input to the click event. But for this example we are going to listen for the enter key being pressed. >> After that, here we're going to run the on enter function when the enter key is pressed. The argument supplied to the function will be the value of our input. See how easy it is to access the input box? One thing that to noticed how Angular 2 normalizes the variable name. I purposely made my template variable hyphenated. In Angular, it will remove the hyphen and make the second word capital. Now we need an on enter function. Underneath our constructor, add the on enter function. Remember this function takes the return value of our input. Also the array is part of our server so we can do this. Here we are calling a method provided by our service in passing in the value of our input. After that go to our myservice.ts file. Now we are going to add our add info method. Here we are accepting a value of any type. Then to add our value is as simple as we just push the value provided to the input to the array. Save, compile and preview. When we type something and press enter, it should be added to our list. >> That's everything you need to know to build a small app with Angular 2. As you can see, they have really designed Angular to be even easier to use. And require less typing than before.

Back to the top