Search a title or topic

Over 20 million podcasts, powered by 

Player FM logo
Artwork

Content provided by Bhavik. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Bhavik or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://podcastplayer.com/legal.
Player FM - Podcast App
Go offline with the Player FM app!

Episode 19: services in angular - Angular Guide

2:35
 
Share
 

Fetch error

Hmmm there seems to be a problem fetching this series right now. Last successful fetch was on February 27, 2024 04:00 (2y ago)

What now? This series will be checked again in the next day. If you believe it should be working, please verify the publisher's feed link below is valid and includes actual episode links. You can contact support to request the feed be immediately fetched.

Manage episode 330408700 series 3346792
Content provided by Bhavik. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Bhavik or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://podcastplayer.com/legal.
Exploring Angular Services Services in Angular is meant for specifically making the call to RestFul API and getting the data and passing data to all component whichever component subscribe to it. Moreover, it gives us the benefit of code reusability and data sharing across components. Goals How to create a basic service in Angular How to subscribe to the service response. How to handle errors in service. Specifications In this tutorial, we will create a basic angular application and try to use the service to get data and pass the data component. Why Services The component is meant for providing the data to view, when I say view means providing the data to respective HTML whatever is required, it is not a good practice to make an API call directly from the component. Services give the benefit of separation of concerns and you can say single responsibility principle as well. Let's see services in action Create an angular project: go to VS code integrated terminal Run - ng new ServiesTest Run this newly created project by using the below command ng serve Once you run this command you must see the below page at http://localhost:4200/ Create a service by using the below command ng g s DateTime Now go to the DateTimeService.ts file you will find below the code import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DateTimeService { constructor() { } } If you notice it has the @Injectable decorator similar to the @Component decorator which we use to have in an angular component. @Injectable means it can participate in dependency injection, those who don't know dependency injection I will explain it in my next article as it is not the topic of this discussion, it needs further explanation, so will keep that in a separate article.@Injectable accepts metadata objects. So here you can provided In value as root, which means this service can be injected in any of the classes across the project. Now let us write the code to consume the actual service. So here I am trying to call a real-time RestFul API which is fromhttps://www.jsontest.com/ We will call an API located at : http://date.jsontest.com So here is the code for the same : So my code is complaining about httpClient, map, catchError, and errorHandler. So let us do the import for these complaints. import { HttpClient } from '@angular/common/http';
  continue reading

37 episodes

Artwork
iconShare
 

Fetch error

Hmmm there seems to be a problem fetching this series right now. Last successful fetch was on February 27, 2024 04:00 (2y ago)

What now? This series will be checked again in the next day. If you believe it should be working, please verify the publisher's feed link below is valid and includes actual episode links. You can contact support to request the feed be immediately fetched.

Manage episode 330408700 series 3346792
Content provided by Bhavik. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Bhavik or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://podcastplayer.com/legal.
Exploring Angular Services Services in Angular is meant for specifically making the call to RestFul API and getting the data and passing data to all component whichever component subscribe to it. Moreover, it gives us the benefit of code reusability and data sharing across components. Goals How to create a basic service in Angular How to subscribe to the service response. How to handle errors in service. Specifications In this tutorial, we will create a basic angular application and try to use the service to get data and pass the data component. Why Services The component is meant for providing the data to view, when I say view means providing the data to respective HTML whatever is required, it is not a good practice to make an API call directly from the component. Services give the benefit of separation of concerns and you can say single responsibility principle as well. Let's see services in action Create an angular project: go to VS code integrated terminal Run - ng new ServiesTest Run this newly created project by using the below command ng serve Once you run this command you must see the below page at http://localhost:4200/ Create a service by using the below command ng g s DateTime Now go to the DateTimeService.ts file you will find below the code import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DateTimeService { constructor() { } } If you notice it has the @Injectable decorator similar to the @Component decorator which we use to have in an angular component. @Injectable means it can participate in dependency injection, those who don't know dependency injection I will explain it in my next article as it is not the topic of this discussion, it needs further explanation, so will keep that in a separate article.@Injectable accepts metadata objects. So here you can provided In value as root, which means this service can be injected in any of the classes across the project. Now let us write the code to consume the actual service. So here I am trying to call a real-time RestFul API which is fromhttps://www.jsontest.com/ We will call an API located at : http://date.jsontest.com So here is the code for the same : So my code is complaining about httpClient, map, catchError, and errorHandler. So let us do the import for these complaints. import { HttpClient } from '@angular/common/http';
  continue reading

37 episodes

All episodes

×
 
Loading …

Welcome to Player FM!

Player FM is scanning the web for high-quality podcasts for you to enjoy right now. It's the best podcast app and works on Android, iPhone, and the web. Signup to sync subscriptions across devices.

 

Copyright 2025 | Privacy Policy | Terms of Service | | Copyright
Listen to this show while you explore
Play