Angular HTTP Client Quick Start Tutorial

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

КОМЕНТАРІ • 109

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

    Rock you do. A week long self imposed crash course in Angular and your videos have been incredibly useful.

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

    I love your explanation, I asked my whatsapp group members of UI developers ( 1000+ ) to subscribe to your channel . My token of gratitude towards the knowledge I gained by your tutorials.

  • @r1cha11
    @r1cha11 5 років тому +1

    After searching for long.. got a perfect tutorial.

  • @jeromecordjotse7569
    @jeromecordjotse7569 5 років тому

    One of the best video tutorials I've seen

  • @nzjemountfort
    @nzjemountfort 7 років тому

    Yay - tutorials with updated angular , Subbed! Amazing at explaining simply too !

  • @AlanJones83
    @AlanJones83 5 років тому +4

    Very well explained, clearly, perfectly understandable. Thank you!

  • @MandarinHub
    @MandarinHub 7 років тому +1

    Great video, short and to the point!

  • @mehmetyalcn5808
    @mehmetyalcn5808 6 років тому

    Couldn't have been any better. Some concepts changed with the latest versions. But It gives general idea on http communication. Thanks!

  • @daniellaerachannel
    @daniellaerachannel 6 років тому

    best explanation ever! you have a gift man! thanks

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

    Appreciate these awesome tutorials. They've helped me come a long way. Keep up the good work, I enjoy the content you provide.

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

    I like your explanation , plz more tutorials about angular & spring boot

  • @bozidarmitrovic894
    @bozidarmitrovic894 6 років тому +8

    If import { Observable } from 'rxjs/Observable' isn't working, try import { Observable } from 'rxjs'. Worked for me

    • @igorprlja4236
      @igorprlja4236 6 років тому +2

      yes, they changed that in angular 6

    • @user-cx5ry5tt6s
      @user-cx5ry5tt6s 4 роки тому

      AWESOME!!!!!!!!!!!!!!!!!!!! THANK YOU MAN!!!

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

    If you get module ' rxjs/observable ' has no exported member, change it to just 'rxjs' and change the 'posts' property to 'posts!'

  • @leo-zz3td
    @leo-zz3td 2 роки тому

    Amazing, answered all my questions

  • @Lucky-et8cx
    @Lucky-et8cx 7 років тому +2

    Thank you. Your pace is just Amazing as always.

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

    ngIf = ngFor)))
    Thank you for very good tutorial.
    Easy to understand

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

    core.js:6260 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    I get this error trying to show post | json

  • @tamiltechgeek4399
    @tamiltechgeek4399 6 років тому

    how to add js file to angular html component.I am able to link normal html file to a js file using script tag and run in node.js but unable to do same in angular component.Please help.

  • @user-cx5ry5tt6s
    @user-cx5ry5tt6s 4 роки тому

    ERROR in node_modules/rxjs/Observable.d.ts:1:15 - error TS2307: Cannot find module 'rxjs-compat/Observable' or its corresponding type declarations.

  • @michapycek3601
    @michapycek3601 7 років тому +6

    Hi, you got very interesting tutorials. Next video could be about how to properly implement oAuth 2.0 with angular and external identity provider? How to securely care about auth token and refren token? I think firebase won’t let you do it without blaze plan but it should be possible with nodeJS.

    • @Fireship
      @Fireship  7 років тому +8

      I've thought about doing a strictly Angular version of user auth for non-firebase developers - may do this in the future. Thanks for the suggestion.

    • @DerJP
      @DerJP 7 років тому +1

      That would be really helpful :) I already implemented it in my Angular app but I want to see someone who actually knows what he's doing do it (lol)

    • @nisrineamimi8976
      @nisrineamimi8976 6 років тому

      DerJP can you share with us how did u do it please !

  • @edgarsantos7782
    @edgarsantos7782 5 років тому

    So, what comes in the response is an any? Even if you expect on the http a specific type? Let say the response has id: "asdsdsd" instead of id:11001?

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

    finally a sick video!! thank you!!

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

    good. very good explanation. could kindly show us how to create a client with fields to enter user parameters to the restful webservice using the same.

  • @tamasszam879
    @tamasszam879 6 років тому +4

    In Angular6 you need to install rxjs-compat via npm, and then everything will work same as in this video.

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

      Rather not use compat, and actually use the latest tech instead. It's .pipe(map(post => post.Title)) now. All operators go in pipe

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

    Restful is an architecture that says the server has no session state for the user connection, not to be confused with doing http calls.

  • @tejaskulkarni3161
    @tejaskulkarni3161 6 років тому

    But if error is coming in the first place only, then why should we use .retry() as it is going to show error only

  • @shivadigitalweb9265
    @shivadigitalweb9265 6 років тому

    Should we access the data on server using $_POST[] (PHP as backend ) while posting using Angular this.http.post() ??

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

    at 00:41 -> Everybody so far just ignored that cat-formed stain to the right? xD

  • @3000solo
    @3000solo 5 років тому

    this helped me a lot. thanks!

  • @arshgill656ful
    @arshgill656ful 6 років тому +1

    import 'rxjs/add/operator/map';
    used .map but isnt working, mine is angular 7??

    • @F4celessG
      @F4celessG 6 років тому

      I believe you can just do this instead import { map } from "rxjs" that should work

    • @marco46477
      @marco46477 5 років тому +2

      If someone still need it...
      In angular 8:
      Import {map} from 'rxjs/operators';
      .pipe(map(post => post.title))

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

    Could show angular with axios ?

  • @manishkumarsah9813
    @manishkumarsah9813 6 років тому

    Thank you sir . Nice tutorial.

  • @adhivenkatesh3431
    @adhivenkatesh3431 5 років тому

    Nice and legible video thanks and global error handling any video is available ?

  • @danpride2804
    @danpride2804 7 років тому +1

    You are importing HttpClientModule, others are importing HttpClient, both from Angular Core. Whats the difference or is there any?

    • @Fireship
      @Fireship  7 років тому +6

      HttpClientModule is the newer, better API. It parses JSON automatically and has a few other improvements. Eventually the old one will be removed. medium.com/@amcdnl/the-new-http-client-in-angular-4-3-754bd3ff83a8

    • @nisrineamimi8976
      @nisrineamimi8976 6 років тому

      I'm using the same code u did but i get an error in this.http.get saying that httpClientModule didn't know the get .. what to do ?

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

    Please make a video on how to call swagger api in angular !!

  • @bohdanbodnarenko858
    @bohdanbodnarenko858 6 років тому +1

    What linux do you have?

  • @luiscarmona5175
    @luiscarmona5175 5 років тому

    i don't understand how to use HttpHeaders anyone can explain for what can i use it ?

  • @vigneshwaranrenganathan6879
    @vigneshwaranrenganathan6879 7 років тому

    How can I access my local JSON file which is served by http-server from "localhost:8080/resources" ,
    The response Iam getting at browser console network is " Status:200, cause: xhr, Type:json, Transfered:124kb "
    But I couldn't see the output in angular app.
    code used:
    getPosts() {
    this.posts = this.http.get(this.ROOT_URL + '/example.json');
    }

  • @torrchris9260
    @torrchris9260 5 років тому

    thank you so much! This helped a ton

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

    Thank you soooo much for this !

  • @ayoubgharbi7573
    @ayoubgharbi7573 6 років тому

    Thank you for tutorial. Please tell me why i can list my users in console but i cant show them in page. how can i transform the response from the API into an array?

    • @ayoubgharbi7573
      @ayoubgharbi7573 6 років тому

      I am using version6

    • @eus9
      @eus9 6 років тому

      It sounds like you need to JSON.parse() your api response. Until you do that, it's just a string.

  • @santhoshj1560
    @santhoshj1560 6 років тому

    [ts] Property 'map' does not exist on type 'Observable'. [2339] , kindly help me which import i need in angular 77777777777777777777

    • @F4celessG
      @F4celessG 6 років тому

      See arshdeeps comment above

  • @sulaimantriarjo8097
    @sulaimantriarjo8097 6 років тому +1

    hey, Can you create a video about XSRCF Token send by angular 6 to server who need csrf token please?

  • @MrJerczu
    @MrJerczu 7 років тому

    Hey can you make a quick real world example of unit testing angular components and services?

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

    Thanks My bro
    Can i use api for machine learning to display data
    How i can do that
    Thanks

  • @liviurad
    @liviurad 7 років тому +1

    instead of HttpHeaders object there's even a simpler way to send query parameters. You can use a simple object. Here is the headers and params type from code: headers?: HttpHeaders | {[header: string]: string | string[]} , params?: HttpParams|{[param: string]: string | string[]},
    source: github.com/angular/angular/blob/5.0.5/packages/common/http/src/client.ts

    • @Fireship
      @Fireship  7 років тому

      Good point, that is a clean way to go. thanks!

    • @liviurad
      @liviurad 7 років тому

      thx for your tutorials, they are clear and to the point, very often I learned good stuff from them

  • @ceez3317
    @ceez3317 6 років тому +45

    Slow down a little bit

    • @bengilbey6471
      @bengilbey6471 5 років тому +8

      >Settings
      >Speed
      >0.75

    • @NightmareCrab
      @NightmareCrab 5 років тому +2

      You should try to watch videos on x2 to get the gist of it, then rewatch and maybe slow down to get the details. It saves me time at least.

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

    How is it that no one that make these tutorials get a CORS error?

  • @vinaybabu8394
    @vinaybabu8394 7 років тому

    Great knowledge sharing and thanx for ur videos and need i18n in angular 5

  • @pauld8376
    @pauld8376 2 роки тому +2

    This video needs updating

  • @eddardstark5540
    @eddardstark5540 6 років тому

    *ngFor= "let post of posts | async"
    What mean this "| async"?

    • @jdubeau007
      @jdubeau007 6 років тому

      {{ post | json }}
      | is a pipe and "async" tells the ngFor directive that "posts" are async.
      "posts" is an observable.

  • @nakulnagariya7736
    @nakulnagariya7736 7 років тому

    Where is my book?? 😉 Nice tutorial.👍

    • @Fireship
      @Fireship  7 років тому

      Did you signup for pro? If you did not get the auto-email, please email hello@angularfirebase.com or send me a message on slack.

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

    The tutorials doesn't work anymore with the newer versions of angular. Check out the official documentation in the description

  • @mohamedziham3745
    @mohamedziham3745 5 років тому

    i thought subscribing is compulsory to see the returned values ...

  • @chicken_teriyaki
    @chicken_teriyaki 5 років тому

    at 3:14 its ngFor not ngIf

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

    Thanks👏👏👏👏👏

  • @Mouyahama
    @Mouyahama 7 років тому +5

    3:12 that's an *ngFor not an *ngIf :)

    • @Fireship
      @Fireship  7 років тому

      Oops, meant to say ngFor right there. Good catch.

    • @Mouyahama
      @Mouyahama 7 років тому

      no problem ;) great video as usual very informative keep up the good work Jeff!

    • @nzjemountfort
      @nzjemountfort 7 років тому

      Next - find the spelling mistakes :)

    • @valikonen
      @valikonen 7 років тому

      Actually is a good practice to use *ngIf in *ngFor, it's a good change to get an error in console if data it'd not coming very fast.

  • @floodyboy5307
    @floodyboy5307 7 років тому +1

    Very nice

  • @yujochia
    @yujochia 6 років тому

    So clearly

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

    I always use post

  • @rjagan2008
    @rjagan2008 7 років тому +1

    Great ...

  • @v.p22709
    @v.p22709 4 роки тому

    Thank you

  • @michaelgonzalez5626
    @michaelgonzalez5626 6 років тому

    3:35 typescript http get

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

    very good

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

    excellent

  • @Silvblade79
    @Silvblade79 6 років тому

    “Ok today I will explain http, angular and api’s... Did you get all that?
    Now send an api call to subscribe to the Chanel. End of presentation!”
    Jesus Christ I think I ruined my mouse left button due to too many pause hits.

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

    How do you type so fast? lol
    I cant even see

  • @esraasamir6901
    @esraasamir6901 6 років тому

    How can use facebook api to get facebook posts in angular5

  • @guplaypanya
    @guplaypanya 5 років тому

    Thanks

  • @eddardstark5540
    @eddardstark5540 6 років тому

    My Chrome console doesnt give a shit about the post request response error, lol

  • @omarhabash8355
    @omarhabash8355 6 років тому

    so no more subscribing?

  • @froxworld1
    @froxworld1 5 років тому

    SLOW for next tutorial impossible to follow....

  • @trevormugo2783
    @trevormugo2783 6 років тому +1

    dude u too fast

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

    SLOW IT DOWN MAN

  • @SaeedNeamati
    @SaeedNeamati 5 років тому

    Angular has too much boilerplate code

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

    Finally a Non Indian Accent Video hahaha

  • @YuriiKratser
    @YuriiKratser 5 років тому

    bad video coz it is not clear about httpheaders

  • @АристархЗловредович
    @АристархЗловредович 5 років тому +1

    very fast....mb this is good explain but i am nihua neponyal

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

    PLS How can i save image in my project folder in angular 7??

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

      Plenty of stackoverflow questions on that. Give it a google

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

      @@NilsMoller I already do it but I didn't get what I want