Angular 9 Tutorial For Beginners #58- Services

Поділитися
Вставка
  • Опубліковано 23 січ 2025

КОМЕНТАРІ • 120

  • @mdshabbiralam21
    @mdshabbiralam21 4 роки тому +7

    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.

  • @sreenuksr
    @sreenuksr 4 роки тому +5

    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

  • @themysteryman-e2j
    @themysteryman-e2j 4 роки тому +5

    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.

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Thanks Varaprasad. Appreciate your kind words

  • @jacksm8709
    @jacksm8709 4 роки тому +1

    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

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Hi Jacks. Yes uploading few tutorials today. Thanks Sridhar

  • @kiranshelar2961
    @kiranshelar2961 2 роки тому +1

    The quality of this content is simply amazing 👏🏻 learning so much, thankyou!

  • @mohamedibrahimabdulghani5514
    @mohamedibrahimabdulghani5514 2 роки тому

    Thank you man, how do I select the item to display from the list or from the array ?

  • @amanuellebassi7294
    @amanuellebassi7294 4 роки тому +1

    Thanks Sridhar. Awesome explanation! I am enjoying it. Thank you for taking your precious time. I will follow you all the way!

  • @rajujeelaga5196
    @rajujeelaga5196 4 роки тому +4

    Your explanation is very clear bro, thanks a lot for the Tutorials 👏
    Waiting for CRUD operation videos in Angular...

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Thank you Raju for your kind words. Thanks for watching. 🙏

  • @kamalmohansinghrana1381
    @kamalmohansinghrana1381 4 роки тому +1

    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

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      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 ua-cam.com/video/oEO0KzY1ipg/v-deo.html

  • @overflowingworld7291
    @overflowingworld7291 2 роки тому

    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

  • @vicsaisan4349
    @vicsaisan4349 3 роки тому

    Excellent tutorial. Well explained 👍

  • @shirish757
    @shirish757 4 роки тому +1

    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.

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Hi Shirish. I didnt quite follow your question. Can you pls elaborate it for me?

  • @antonioubedamontero2927
    @antonioubedamontero2927 4 роки тому

    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?

  • @Sn-kd2ty
    @Sn-kd2ty 3 роки тому

    ur Teaching is on another level,Im subscribing

  • @Nadh_Zulki
    @Nadh_Zulki 4 роки тому +1

    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 ❤️

  • @sarojKumar-dv1dy
    @sarojKumar-dv1dy 2 роки тому +1

    Very nice tutorial ❤ and very useful

    • @ARCTutorials
      @ARCTutorials  2 роки тому

      Thank you so much Saroj for your kind words

  • @rahulchopkar1333
    @rahulchopkar1333 4 роки тому +1

    Thank you for this tutorial series 🙏. It's help's alot.

  • @poojahavaldar4873
    @poojahavaldar4873 3 роки тому +1

    When I run program I couldn't see the contact list in the url I am just getting blank screen y so

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Pooja. Can you pls send me screenshot of console error at soorya.aaradhya@gmail.com

  • @AsadKhan-ux3tr
    @AsadKhan-ux3tr 4 роки тому +1

    hello sir if i have remove services after generation of service what will i do

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Hi Asad. We will have to remove it manually.

  • @chiragsolanki2215
    @chiragsolanki2215 3 роки тому +1

    Really Your tutorial is great for everyone.Please share your notes which is created while learing .

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Chirag. Thanks for your kind words. Please drop me a note at soorya.aaradhya@gmail.com

  • @mrinaltewary
    @mrinaltewary 4 роки тому +1

    Nice and Simple Explanation

  • @arunachinni8483
    @arunachinni8483 3 роки тому +1

    I didn't get the output sir because there is how to write *ngFor let contact of contactList where r u from take ' contact'

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Aruna. Can you please chck these updated tutorials on Angular 10 series. ua-cam.com/video/U71G375Aw6E/v-deo.html

  • @omkarmore2198
    @omkarmore2198 3 роки тому +1

    You are more than any teaching classes..

  • @dhanrajnimalwar5472
    @dhanrajnimalwar5472 Рік тому

    Don't we need to register our service in providers array?

  • @shubhamsatpathy6489
    @shubhamsatpathy6489 4 роки тому +1

    Can I write aws key and secret key in services or TS file

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      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

  • @kaseepl
    @kaseepl 4 роки тому +1

    Your tutorials are amazing. Great job

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      Thank you so much for your kind words. Regards Sridhar

  • @ayushipardeshi5294
    @ayushipardeshi5294 4 роки тому +1

    Amazing tutorial ,thankyou sir

  • @byronk5
    @byronk5 4 роки тому

    Your content is fantastic-clear and to the point! Thank you for your efforts! Subscribed.

  • @Dheerajkaruturi
    @Dheerajkaruturi 3 роки тому

    TS2534: A function returning 'never' cannot have a reachable end point. error in ts file done as you demostrated

  • @rajatsharma949
    @rajatsharma949 4 роки тому +1

    Hello, can I know that what is the what importance does void has in ngOnInit: void{}

    • @ARCTutorials
      @ARCTutorials  4 роки тому +2

      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 ua-cam.com/video/oEO0KzY1ipg/v-deo.html

  • @veda803
    @veda803 3 роки тому +1

    I love your videos. if the total angular course is available in udemy please share the udemy course URL

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Veda. All my videos are free and hosted on UA-cam only. Please do check out Angular 10 complete series as well. Also if you want, please consider buying me coffee www.buymeacoffee.com/arctutorials

    • @veda803
      @veda803 3 роки тому

      ​@@ARCTutorials haa sure..seriously i love your tutorials...​

  • @kalyanchatterjee8624
    @kalyanchatterjee8624 3 роки тому +1

    Great video! I wish I live to see people calling '@' just "at" and not "at the rate".

  • @arunachinni8483
    @arunachinni8483 3 роки тому

    I have one problem ,I didn't get the output because type '{Id: number.name: string; course: string;}'is not assignable to type'never'.

    • @arunachinni8483
      @arunachinni8483 3 роки тому

      What can I do now

    • @arunachinni8483
      @arunachinni8483 3 роки тому +1

      Which type I want to write? I can't understood

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Aruna. Can you please email me the code snippet at soorya.aaradhya@gmail.com also I would recommend you Angular 10 services tutorial. ua-cam.com/video/U71G375Aw6E/v-deo.html

  • @nikhilsingh8544
    @nikhilsingh8544 4 роки тому +1

    sir is this series has full content of angular9 or not??

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Yes the series is complete Angular tutorials

  • @امیرحسینحسینی-س3ك
    @امیرحسینحسینی-س3ك 4 роки тому +1

    Thank you

  • @vinjamuripavankumar9833
    @vinjamuripavankumar9833 4 роки тому

    Why you use private and public in constructor..

  • @AfolabiJude
    @AfolabiJude 4 роки тому +1

    This channel deserves an award! Like if you agree

  • @RizwanKhan-yn9yb
    @RizwanKhan-yn9yb 4 роки тому +1

    Why I am getting this error
    Type '{ contactId: number; contactName: string; }' is not assignable to type 'never'.

    this.contactList=this.contactsService.getContacts();

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Looks like the type error on the contactList.

  • @sravaninuthi894
    @sravaninuthi894 4 роки тому +1

    Thank you sir I'm learning angular through your vedios. Could you teach us small project on angular sir

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      Sure Srvani. Live project is starting this week. Hope you will like it

    • @sravaninuthi894
      @sravaninuthi894 4 роки тому

      @@ARCTutorials sir could you send me the notes of routing concept to this mail nlsravani29@gmail.com

  • @gokhanc.5250
    @gokhanc.5250 3 роки тому +1

    perfect

  • @gokhanc.5250
    @gokhanc.5250 3 роки тому +1

    thanks

  • @MrFuture-96
    @MrFuture-96 4 роки тому +1

    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

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      So nice of you! Thanks for watching the videos. Regards Sridhar

  • @cse_046_praveenkumar.a3
    @cse_046_praveenkumar.a3 3 роки тому +1

    Bro Im facing a type error while writing service ☹️

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Can you please share details on the error?

    • @cse_046_praveenkumar.a3
      @cse_046_praveenkumar.a3 3 роки тому

      @@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()
      ~~~~~~~~~~~~~~~~~

    • @mastvideos2355
      @mastvideos2355 3 роки тому

      @@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

  • @vikaswin123
    @vikaswin123 4 роки тому +1

    Every video is excellent. can I contact you sir.

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Thank you so much Vikas. You can reach out to me at soorya.aaradhya@gmail.com

  • @ShishupalSingh-zb2sk
    @ShishupalSingh-zb2sk 3 роки тому

    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

  • @shivangijain9181
    @shivangijain9181 4 роки тому

    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

    • @ashekseum9301
      @ashekseum9301 3 роки тому +1

      Use this:
      contactList = [] as any;
      ngOnInit(): void {
      this.contactList = this.contactsService.getContacts();
      }

    • @ChandeckTv001
      @ChandeckTv001 3 роки тому

      @@ashekseum9301 thanks man it actually solve my prob

  • @amanagrawal7699
    @amanagrawal7699 3 роки тому

    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.

  • @vigneshvicky6720
    @vigneshvicky6720 4 роки тому +1

    Bro I have one doubt...

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      Yes sir

    • @vigneshvicky6720
      @vigneshvicky6720 4 роки тому +1

      @@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

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      @@vigneshvicky6720 You will need to write a method in Service and call it Component to read/process the data

    • @vigneshvicky6720
      @vigneshvicky6720 4 роки тому

      @@ARCTutorials I already tried it but the value is not changed it remains same g=0 as I mentioned above...

  • @suyogmoon3099
    @suyogmoon3099 3 роки тому +1

    Where is lecture 56 and 57

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      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 ua-cam.com/video/Fg4spR6cdBQ/v-deo.html

  • @ashutoshmishra3492
    @ashutoshmishra3492 3 роки тому

    Sir after 55 ,the video is 58 where is 56,57?

  • @mdshabbiralam21
    @mdshabbiralam21 4 роки тому +1

    Where are 56th and 57th lectures?

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      Hi Shabir. I will check and add the missing ones.

    • @mdshabbiralam21
      @mdshabbiralam21 4 роки тому +1

      @@ARCTutorials sure! it will be helpful to us and thank you.

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      Sure buddy will do. Meanwhile you can continue on other tutorials and do let me know if u have any doubts. Regards Sridhar

    • @mdshabbiralam21
      @mdshabbiralam21 4 роки тому

      @@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.❤️

  • @امیرحسینحسینی-س3ك
    @امیرحسینحسینی-س3ك 4 роки тому +1

    😍🙏

  • @fahadg111
    @fahadg111 8 місяців тому +1

    i dont understand this tutorial you not explain about contacts.component.ts file you only do it .

    • @ARCTutorials
      @ARCTutorials  8 місяців тому

      Hi Bro. Can u pls check latest Angular 16 version tutorials? I have explained in detail everything

  • @jorgelightwave
    @jorgelightwave 4 роки тому +1

    Too many ads, too many writing notes and again, too many ads. A high price for a mid-level tutorial

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      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.

    • @danielw1592
      @danielw1592 4 роки тому +1

      Stop being a complainer. He is posting these tutorials for free. If you don't like it, go somewhere else.

    • @jorgelightwave
      @jorgelightwave 4 роки тому +2

      @@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 UA-cam videos without going through the ads, which is now my method for the abusive videos of this channel

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      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.

    • @jorgelightwave
      @jorgelightwave 4 роки тому +1

      @@ARCTutorials that's nice, thank you for reducing the number of ads