Angular HTTP Client Quick Start Tutorial

  Рет қаралды 195,266

Fireship

Fireship

Күн бұрын

Пікірлер: 109
@petermanger9047
@petermanger9047 4 жыл бұрын
Rock you do. A week long self imposed crash course in Angular and your videos have been incredibly useful.
@MuraliKrishna-gn7ev
@MuraliKrishna-gn7ev 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.
@bozidarmitrovic894
@bozidarmitrovic894 6 жыл бұрын
If import { Observable } from 'rxjs/Observable' isn't working, try import { Observable } from 'rxjs'. Worked for me
@igorprlja4236
@igorprlja4236 6 жыл бұрын
yes, they changed that in angular 6
@user-cx5ry5tt6s
@user-cx5ry5tt6s 4 жыл бұрын
AWESOME!!!!!!!!!!!!!!!!!!!! THANK YOU MAN!!!
@r1cha11
@r1cha11 4 жыл бұрын
After searching for long.. got a perfect tutorial.
@mehmetyalcn5808
@mehmetyalcn5808 5 жыл бұрын
Couldn't have been any better. Some concepts changed with the latest versions. But It gives general idea on http communication. Thanks!
@jeromecordjotse7569
@jeromecordjotse7569 5 жыл бұрын
One of the best video tutorials I've seen
@sararhomari5372
@sararhomari5372 3 жыл бұрын
I like your explanation , plz more tutorials about angular & spring boot
@nzjemountfort
@nzjemountfort 7 жыл бұрын
Yay - tutorials with updated angular , Subbed! Amazing at explaining simply too !
@AlanJonesBurga
@AlanJonesBurga 5 жыл бұрын
Very well explained, clearly, perfectly understandable. Thank you!
@ian19911134
@ian19911134 3 жыл бұрын
If you get module ' rxjs/observable ' has no exported member, change it to just 'rxjs' and change the 'posts' property to 'posts!'
@tamasszam879
@tamasszam879 6 жыл бұрын
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
@leo-zz3td
@leo-zz3td 2 жыл бұрын
Amazing, answered all my questions
@MandarinHub
@MandarinHub 7 жыл бұрын
Great video, short and to the point!
@kernel_developer
@kernel_developer 4 жыл бұрын
Appreciate these awesome tutorials. They've helped me come a long way. Keep up the good work, I enjoy the content you provide.
@michapycek3601
@michapycek3601 7 жыл бұрын
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 жыл бұрын
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 жыл бұрын
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 !
@daniellaerachannel
@daniellaerachannel 6 жыл бұрын
best explanation ever! you have a gift man! thanks
@markus27183
@markus27183 3 жыл бұрын
Restful is an architecture that says the server has no session state for the user connection, not to be confused with doing http calls.
@Slater8242
@Slater8242 2 жыл бұрын
ngIf = ngFor))) Thank you for very good tutorial. Easy to understand
@bestrecipes3373
@bestrecipes3373 3 жыл бұрын
finally a sick video!! thank you!!
@liviurad
@liviurad 7 жыл бұрын
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
@shashiswamy62
@shashiswamy62 3 жыл бұрын
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.
@Fischly007
@Fischly007 3 жыл бұрын
at 00:41 -> Everybody so far just ignored that cat-formed stain to the right? xD
@Lucky-et8cx
@Lucky-et8cx 6 жыл бұрын
Thank you. Your pace is just Amazing as always.
@pauld8376
@pauld8376 2 жыл бұрын
This video needs updating
@jhanvimimani8480
@jhanvimimani8480 2 жыл бұрын
Thank you soooo much for this !
@ceez3317
@ceez3317 6 жыл бұрын
Slow down a little bit
@bengilbey6471
@bengilbey6471 5 жыл бұрын
>Settings >Speed >0.75
@NightmareCrab
@NightmareCrab 5 жыл бұрын
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.
@edrobinson8248
@edrobinson8248 3 жыл бұрын
excellent
@adhivenkatesh3431
@adhivenkatesh3431 5 жыл бұрын
Nice and legible video thanks and global error handling any video is available ?
@kishkinjoshi5097
@kishkinjoshi5097 3 жыл бұрын
Please make a video on how to call swagger api in angular !!
@manishkumarsah9813
@manishkumarsah9813 6 жыл бұрын
Thank you sir . Nice tutorial.
@v.p22709
@v.p22709 4 жыл бұрын
Thank you
@3000solo
@3000solo 5 жыл бұрын
this helped me a lot. thanks!
@armandmugabo1170
@armandmugabo1170 2 жыл бұрын
very good
@walterwhite1186
@walterwhite1186 2 жыл бұрын
Thanks👏👏👏👏👏
@yujochia
@yujochia 6 жыл бұрын
So clearly
@torrchris9260
@torrchris9260 5 жыл бұрын
thank you so much! This helped a ton
@bohdanbodnarenko858
@bohdanbodnarenko858 6 жыл бұрын
What linux do you have?
@guplaypanya
@guplaypanya 4 жыл бұрын
Thanks
@vinaybabu8394
@vinaybabu8394 6 жыл бұрын
Great knowledge sharing and thanx for ur videos and need i18n in angular 5
@MrJerczu
@MrJerczu 7 жыл бұрын
Hey can you make a quick real world example of unit testing angular components and services?
@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.
@floodyboy5307
@floodyboy5307 7 жыл бұрын
Very nice
@Fireship
@Fireship 7 жыл бұрын
Thank you!
@shivadigitalweb9265
@shivadigitalweb9265 6 жыл бұрын
Should we access the data on server using $_POST[] (PHP as backend ) while posting using Angular this.http.post() ??
@ilegallive999
@ilegallive999 3 жыл бұрын
The tutorials doesn't work anymore with the newer versions of angular. Check out the official documentation in the description
@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?
@rjagan2008
@rjagan2008 7 жыл бұрын
Great ...
@danpride2804
@danpride2804 7 жыл бұрын
You are importing HttpClientModule, others are importing HttpClient, both from Angular Core. Whats the difference or is there any?
@Fireship
@Fireship 7 жыл бұрын
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 ?
@USONOFAV
@USONOFAV 4 жыл бұрын
I always use post
@openmindjustdoit1306
@openmindjustdoit1306 4 жыл бұрын
Thanks My bro Can i use api for machine learning to display data How i can do that Thanks
@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.
@khgamer383
@khgamer383 4 жыл бұрын
Could show angular with axios ?
@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
@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
@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.
@arshgill656ful
@arshgill656ful 6 жыл бұрын
import 'rxjs/add/operator/map'; used .map but isnt working, mine is angular 7??
@F4celessG
@F4celessG 5 жыл бұрын
I believe you can just do this instead import { map } from "rxjs" that should work
@marco46477
@marco46477 5 жыл бұрын
If someone still need it... In angular 8: Import {map} from 'rxjs/operators'; .pipe(map(post => post.title))
@sulaimantriarjo8097
@sulaimantriarjo8097 6 жыл бұрын
hey, Can you create a video about XSRCF Token send by angular 6 to server who need csrf token please?
@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.
@KoltPenny
@KoltPenny 4 жыл бұрын
How is it that no one that make these tutorials get a CORS error?
@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.
@mohamedziham3745
@mohamedziham3745 5 жыл бұрын
i thought subscribing is compulsory to see the returned values ...
@michaelgonzalez5626
@michaelgonzalez5626 6 жыл бұрын
3:35 typescript http get
@vigneshwaranrenganathan6879
@vigneshwaranrenganathan6879 6 жыл бұрын
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'); }
@luiscarmona5175
@luiscarmona5175 5 жыл бұрын
i don't understand how to use HttpHeaders anyone can explain for what can i use it ?
@chicken_teriyaki
@chicken_teriyaki 5 жыл бұрын
at 3:14 its ngFor not ngIf
@omarhabash8355
@omarhabash8355 6 жыл бұрын
so no more subscribing?
@Mouyahama
@Mouyahama 7 жыл бұрын
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.
@santhoshj1560
@santhoshj1560 5 жыл бұрын
[ts] Property 'map' does not exist on type 'Observable'. [2339] , kindly help me which import i need in angular 77777777777777777777
@F4celessG
@F4celessG 5 жыл бұрын
See arshdeeps comment above
@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.
@AlGrantnz
@AlGrantnz 4 жыл бұрын
SLOW IT DOWN MAN
@trevormugo2783
@trevormugo2783 5 жыл бұрын
dude u too fast
@victorb9773
@victorb9773 4 жыл бұрын
How do you type so fast? lol I cant even see
@froxworld1
@froxworld1 5 жыл бұрын
SLOW for next tutorial impossible to follow....
@eddardstark5540
@eddardstark5540 6 жыл бұрын
My Chrome console doesnt give a shit about the post request response error, lol
@retromobs6018
@retromobs6018 4 жыл бұрын
Finally a Non Indian Accent Video hahaha
@YuriiKratser
@YuriiKratser 5 жыл бұрын
bad video coz it is not clear about httpheaders
@SaeedNeamati
@SaeedNeamati 5 жыл бұрын
Angular has too much boilerplate code
@esraasamir6901
@esraasamir6901 6 жыл бұрын
How can use facebook api to get facebook posts in angular5
@АристархЗловредович
@АристархЗловредович 5 жыл бұрын
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
Angular HTTP | From Basics to Advanced
37:08
Get Arrays
Рет қаралды 26 М.
Angular Testing Quick Start
12:15
Fireship
Рет қаралды 203 М.
Will A Basketball Boat Hold My Weight?
00:30
MrBeast
Рет қаралды 153 МЛН
Osman Kalyoncu Sonu Üzücü Saddest Videos Dream Engine 275 #shorts
00:29
HTTP in Angular - Learning Angular (Part 8)
12:42
Angular
Рет қаралды 45 М.
Angular 4/5 HTTP GET and POST requests tutorial
17:17
techsith
Рет қаралды 178 М.
I built 10 web apps... with 10 different languages
14:23
Fireship
Рет қаралды 1,6 МЛН
Angular Router - The Basics and Beyond
11:47
Fireship
Рет қаралды 130 М.
Angular Components Beginner's Guide
13:52
Fireship
Рет қаралды 190 М.
How To Build Feature Flags Like A Senior Dev In 20 Minutes
20:33
Web Dev Simplified
Рет қаралды 82 М.
Session Vs JWT: The Differences You May Not Know!
7:00
ByteByteGo
Рет қаралды 239 М.
What is a REST API?
9:12
IBM Technology
Рет қаралды 1,6 МЛН
А зачем ему рабочий ноутбук?..
0:12
Новостной Гусь
Рет қаралды 607 М.
Мучительная смерть  HUAWEI Mate XT
0:58
Кик Обзор
Рет қаралды 3,5 МЛН
Ai Samsung vs Ai Apple
1:00
Romancev768
Рет қаралды 341 М.
Этот ТЕЛЕФОН несокрушим 😮
0:21
EpicShortsRussia
Рет қаралды 568 М.