Angular Services

Name: Angular Services
Author: Michaela Ochnich

Explore the role of Angular services and dependency injections

Preview the first lesson free — get full access to all 3 lessons.

Course: On-Demand

This lesson will cover angular services and how to get started using them. Services are a special angular class that work to perform a specific function for the application. Services help separate out certain application functionality from components. Specifically functions that don't have to interact with a view. And these services are reusable. The same service class can be used and injected across multiple components. This helps to keep your application modular and more efficient. Services can provide many different functions, like making API calls to fetch data. It may also alter or process the data in some way before passing it to the component. Services are also used to share data between unrelated components. And Angular provides some pre-built services as well. HTTP client is a common one, which is used to make HTTP requests. To create a service you're gonna run the commands, NG generate service and then the service name. And here you can see it created two different types script files. This first type script file is used for writing tests for the component. And the second type script file here is for the class. The class uses the injectable decorator, which marks this class as an Angular service and passes a metadata object to provide configuration information. For this service, I'm gonna write a quick function here that mocks an API call and returns a list of items for the user. Then to use the service in a component, it has to be injected into that component class. I have a component called view list already generated over here. And first the service has to be imported. And then the service has to be injected into the component constructor. Providing the service to the constructor here allows the component class to call its methods. This is handled with Angular's dependency injection, which will be covered more in depth in a later lesson. Next, I'm gonna declare a variable to store the items and then make the call to the service to retrieve them. Now when the component initializes, it's gonna call that service function to retrieve the list items and store them in the array. Then in the component template, I'm just gonna quickly display that array. Now I'm gonna run the application. The main application component is already set up to show this list component here. Now I'm gonna run the application and then open it up in a browser window. And you can see the list is displaying in the component here. You can also call the service from the component template, but to do so you first have to make the service public. So back in the component class here I'm gonna switch this to make it a public service. Then I'm gonna add a button that when clicked will call this same method from the service. And then I'm gonna remove the service call that's being made in the component class. And now the component only fetches the list item from the service when the button is pressed. That's it for this quick introduction to services. The next lesson, we'll go over dependency injection.

Beginner Provider : Michaela Ochnich 3 Lessons · 10m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

These lessons discuss Angular services and the role they play in an application. You’ll learn how to create a service using a decorator. You’ll also learn about how Angular uses dependency injection to manage dependencies, such as services, and provide them in an application.

What You'll Learn

Understand the role Angular services play in an application
Create an Angular service using a decorator
Explain how Angular uses dependency injection to manage dependencies
Describe how services are provided in an application through dependency injection
Apply the service decorator and its metadata when defining a service

Key Takeaways

Angular services play a defined role within an application, and these lessons explain what that role is.
A service can be created using a decorator.
Angular uses dependency injection to manage dependencies, including services.
Dependency injection is the mechanism Angular uses to provide services within an application.

Frequently Asked Questions

What does this Angular Services course cover?

The course covers Angular services and the role they play in an application, how to create a service using a decorator, and how Angular uses dependency injection to manage dependencies such as services and provide them in an application.

What are the learning objectives of this course?

The stated learning objectives are to learn the role of Angular services and to learn how Angular uses dependency injection.

What topics or lessons are included?

The lessons are: What is a service?, Dependency Injection, and Service decorator and metadata.

What skills does this course relate to?

It relates to Angular (Web Framework), Angular Components, Angular Material, Angular UI, Component Services, and Service Object.

Will I learn how to create an Angular service?

Yes. The course teaches how to create a service using a decorator, and covers the service decorator and its metadata.