Angular 9 Tutorial For Beginners #58- Services
HTML-код
- Опубликовано: 30 июн 2020
- Angular 9 Tutorial For Beginners #58- Services in Angular, Angular services tutorials, services in Angular, Angular services tutorials in Angular, Angular 9 services tutorials in Angular, Angular tutorial learn services tutorials in Angular, angular 9 services tutorials in Angular, angular get set reset values from services tutorials In Angular 6,7,8, 9, angular 8 example,
Angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular introduction, angular version history, angular full tutorial series, best angular tutorial.
Install bootstrap angular tutorial, Learn how to install Bootstrap in Angular 9 app. In this course you will learn how to create small, medium, large applications with Angular 9 in this development tutorial.
Angular 9 Full Tutorial Playlist
• Angular 9 Tutorial For...
Angular 9 Tutorial For Beginners #58- Services
- Services allow us to create reusable common shared functionality between various models and components
- Services are singleton
- Services are injected into the application using DI mechanism
- Services are commonly used for making HTTP requests to our endpoints to request and receive the response
- A service can have value, methods, or a combination of both!
- Unlike components, services need not be included in your modules
- We can create any number of services
- Importing and Injecting services into components are called dependency injection
- Services are injected at runtime, this way code becomes highly efficient and easy to maintain
- ng generate service
- import {Injectable } from '@angular/core';
- We can generate the service in any of the folder we want
- but best practice is always to keep all services related into modules
- @Injectable decorator inform to angular that we can inject it into components
- The service is ProvidedIn "root" will be available across the application
- can be injected into any component
- Make the service as public in the constructor so that you can call the service method from template(html) as well.
Example:
Contacts Module
- Create Contact
- View Contact
- Edit Contact
- Delete Contact
Contact Services
- HTTP
- Processing Data
- Cleaning Data
services.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ContactsService {
constructor() { }
getContacts()
{
const contactList=[
{ContactId:1, ContactName:'James'},
{ContactId:2, ContactName:'Clark'},
{ContactId:3, ContactName:'Ruby'},
{ContactId:4, ContactName:'Jack'}
]
return contactList;
}
callingFromTemplate()
{
console.log('calling from template');
}
}
component.ts
import { Component, OnInit } from '@angular/core';
import { ContactsService } from '../contacts.service';
@Component({
selector: 'app-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit {
_contacts = [];
constructor(private contactservice: ContactsService) {}
ngOnInit(): void {
this._contacts = this.contactservice.getContacts();
}
}
component.html
List Of Contacts
{{contact.ContactId}} - {{contact.ContactName}}
Calling From Template
Thanks Sreeni.
thanks sreenu
This is how you teach❤️.
I have seen the video from Udemy, they are good but it was easy for me to understand by your explanation .
Thank you.
Finally understood what Service is.
Glad to hear that
thanks a lot, this clears the questions I had asked earlier... as usual simple and straight to the point. thanks.. missing tutorials 56 and 57
Hi Jacks. Yes uploading few tutorials today. Thanks Sridhar
Really Really great channel for angular.
Your way of explaining the concept is another level.
I'll definitely suggest this channel to all my friends.
Appreciate your hard work.
Thanks Varaprasad. Appreciate your kind words
Thanks Sridhar. Awesome explanation! I am enjoying it. Thank you for taking your precious time. I will follow you all the way!
Thank you Amanuel 🙏🙏
The quality of this content is simply amazing 👏🏻 learning so much, thankyou!
Happy to hear that!
Excellent tutorial. Well explained 👍
Your explanation is very clear bro, thanks a lot for the Tutorials 👏
Waiting for CRUD operation videos in Angular...
Thank you Raju for your kind words. Thanks for watching. 🙏
Thank you for this tutorial series 🙏. It's help's alot.
Glad it was helpful!
Your tutorials are amazing. Great job
Thank you so much for your kind words. Regards Sridhar
ur Teaching is on another level,Im subscribing
This channel deserves an award! Like if you agree
Amazing tutorial ,thankyou sir
Glad you liked it
amazing video sir.
So nice of you
Hi sir. I'm a newbie in programming. Really the best tutorial so far I've been watching. The way you explain is very easy to understand compared to Udemy. Currently, I've been assigned in a project on my work using Angular 10 sir. I hope that you can provide more tutorials on that. I've been watching the tutorial for Angular 10 that you posted. So excited to know more about programming and from all your tutorials.
Greetings from Malaysia ❤️
You are welcome!
perfect
Thank you so much buddy!
Thank you
You're welcome
Very nice tutorial ❤ and very useful
Thank you so much Saroj for your kind words
Nice and Simple Explanation
Thank you so much 🙂
thanks
Thank you so much buddy!
Thank you man, how do I select the item to display from the list or from the array ?
You are more than any teaching classes..
Thank you so much Omkar
I have a doubt. If we have three modules a, b, c and some of them use a service that imports inside It something (maybe http), where do we import that http that uses oír service?
Really Your tutorial is great for everyone.Please share your notes which is created while learing .
Hi Chirag. Thanks for your kind words. Please drop me a note at soorya.aaradhya@gmail.com
Pls how do I create a service for url.. Assuming I want to move the url from my source code to a centralized location (service) for easy iteration and testing
Thank you so much sir for each great video. I wish I could work for you someday to spend time in such a great Team of yours and I am proud of you saying, my Teacher :) Sir can you please make series on asp.net core using entity Framework and Dapper ORM with MSSQL with Angular 9
So nice of you! Thanks for watching the videos. Regards Sridhar
Great video! I wish I live to see people calling '@' just "at" and not "at the rate".
Thanks Mate!
in case we are creating frontend on angular and backend on spring and errors occur on validation on server side (in case user manipulate front end) then how we show those errors in our angular controller error
Hi Kamal. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning ruclips.net/video/oEO0KzY1ipg/видео.html
Your content is fantastic-clear and to the point! Thank you for your efforts! Subscribed.
Awesome, thank you!
I am little confused as we can use services as shared service which we can use in multiple components using dependency injection then can we use the same service to publish and subscribe.
Hi Shirish. I didnt quite follow your question. Can you pls elaborate it for me?
😍🙏
You are most welcome buddy!!!
hello sir, recently i had an interview with a company, i wanted to be in React, but they have selected me for angular? I have learned React, but have no idea about Angular. Though they are willing to give me 15 days to learn Angular? My query is is Angular Good as compared with React, as companies have started shifting to React due to its simplicity. Please reply
TS2534: A function returning 'never' cannot have a reachable end point. error in ts file done as you demostrated
Thank you sir I'm learning angular through your vedios. Could you teach us small project on angular sir
Sure Srvani. Live project is starting this week. Hope you will like it
@@ARCTutorials sir could you send me the notes of routing concept to this mail nlsravani29@gmail.com
Don't we need to register our service in providers array?
Hello, can I know that what is the what importance does void has in ngOnInit: void{}
Hi Rajat. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning ruclips.net/video/oEO0KzY1ipg/видео.html
I love your videos. if the total angular course is available in udemy please share the udemy course URL
Hi Veda. All my videos are free and hosted on RUclips only. Please do check out Angular 10 complete series as well. Also if you want, please consider buying me coffee www.buymeacoffee.com/arctutorials
@@ARCTutorials haa sure..seriously i love your tutorials...
hello sir if i have remove services after generation of service what will i do
Hi Asad. We will have to remove it manually.
I didn't get the output sir because there is how to write *ngFor let contact of contactList where r u from take ' contact'
Hi Aruna. Can you please chck these updated tutorials on Angular 10 series. ruclips.net/video/U71G375Aw6E/видео.html
When I run program I couldn't see the contact list in the url I am just getting blank screen y so
Hi Pooja. Can you pls send me screenshot of console error at soorya.aaradhya@gmail.com
I am using Two Security libraries msadalangular6 and angular-oauth2-oidc .
Q1. I want to create a common service which has both the security libraries services namely Msadalangular6Service and OauthService, How can I crwtae that service.
Q2. How do I retrieve the data of both the libraries services inside a common service that created above?
Q3. Then I want to use that common service througout my application.
Can I write aws key and secret key in services or TS file
Hi Shubha,. Secret keys are usually stored at server side like s3 secret manager etc. Its not good practice to store secret details in UI layer
sir is this series has full content of angular9 or not??
Yes the series is complete Angular tutorials
Why I am getting this error
Type '{ contactId: number; contactName: string; }' is not assignable to type 'never'.
this.contactList=this.contactsService.getContacts();
Looks like the type error on the contactList.
Why you use private and public in constructor..
Every video is excellent. can I contact you sir.
Thank you so much Vikas. You can reach out to me at soorya.aaradhya@gmail.com
I have one problem ,I didn't get the output because type '{Id: number.name: string; course: string;}'is not assignable to type'never'.
What can I do now
Which type I want to write? I can't understood
Hi Aruna. Can you please email me the code snippet at soorya.aaradhya@gmail.com also I would recommend you Angular 10 services tutorial. ruclips.net/video/U71G375Aw6E/видео.html
this.contactList = this.contactsService.getContacts(); => this line shows error:
"Type '{ contactId: number; contactName: string; }[]' is not assignable to type 'never[]'.
Type '{ contactId: number; contactName: string; }' is not assignable to type 'never'.",
Please check
Use this:
contactList = [] as any;
ngOnInit(): void {
this.contactList = this.contactsService.getContacts();
}
@@ashekseum9301 thanks man it actually solve my prob
Sir after 55 ,the video is 58 where is 56,57?
Where is lecture 56 and 57
Hi Suyog. I will add it to the playlist. In the meanwhile Also please check out Angular 10 series tutorial with much more use cases ruclips.net/video/Fg4spR6cdBQ/видео.html
Bro Im facing a type error while writing service ☹️
Can you please share details on the error?
@@ARCTutorials Error: src/app/contacts/contacts.component.ts:16:5 - error TS2322: Type '{ id: number; name: string; }[]' is not assignable to type 'never[]'.
Type '{ id: number; name: string; }' is not assignable to type 'never'.
16 this.contactsList=this.sampleService.getContacts()
~~~~~~~~~~~~~~~~~
@@ARCTutorials //////Error: src/app/contacts/contacts.component.html:4:19 - error TS2339: Property 'contactName' does not exist on type 'never'. /////// same error to me. Please help
Bro I have one doubt...
Yes sir
@@ARCTutorials tq for taking look on me....how do I update any change in service from components.?? For example g=0 in service and component one changed g value to g=1 and when I called in component two it g value should be 1
@@vigneshvicky6720 You will need to write a method in Service and call it Component to read/process the data
@@ARCTutorials I already tried it but the value is not changed it remains same g=0 as I mentioned above...
i dont understand this tutorial you not explain about contacts.component.ts file you only do it .
Hi Bro. Can u pls check latest Angular 16 version tutorials? I have explained in detail everything
Where are 56th and 57th lectures?
Hi Shabir. I will check and add the missing ones.
@@ARCTutorials sure! it will be helpful to us and thank you.
Sure buddy will do. Meanwhile you can continue on other tutorials and do let me know if u have any doubts. Regards Sridhar
@@ARCTutorials yes sir, that's what I'm doing , currently I'm at 64th video. And i almost followed your playlist. And will continue
It was really great help for me.❤️
Too many ads, too many writing notes and again, too many ads. A high price for a mid-level tutorial
My apologies for too many ads. Its a way to support myself. I will try and reduce the number of ads. Apologies again for the inconvenience.
Stop being a complainer. He is posting these tutorials for free. If you don't like it, go somewhere else.
@@danielw1592 you have to reconsider your concept of free. Every ad you see is a price you pay and a little profit for publisher. I will complain if I have reasons to do it, that's what comments are for, among other things.
PS: That's what I did. There are also sites that allow you to download RUclips videos without going through the ads, which is now my method for the abusive videos of this channel
Dear Daniel, Jorge - i understand and respect both your views and feedback. Inhave already reduced the number of ads. I created this channel to share my knowledge and also to make friends here. We r all friends here. I love you both.
@@ARCTutorials that's nice, thank you for reducing the number of ads