HTTP in Angular - Learning Angular (Part 8)
HTML-код
- Опубликовано: 4 май 2023
- Learn how to support HTTP requests with this tutorial. We will dive into using fetch to make an HTTP request to a live endpoint, refactor services and service calls to use the new format, add filter capabilities to our app with template variables and typescript.
Resources:
Completed code from this lesson → goo.gle/42j4NjS
Catch the previous episode, Forms in Angular → goo.gle/3LW8YMP
Watch more episodes of Learning Angular→ goo.gle/Learning-Angular
Subscribe to Angular → goo.gle/Angular
#Angular 
Развлечения
![Rob49 - On Dat Money (with Cardi B) [Official Video]](http://i.ytimg.com/vi/fTFS58mHJh8/mqdefault.jpg)
Hey guys, in case you paste the objects inside db.json in VSCode and the compiler shouts at you because none of their keys have double quotes, right click to one of the keys and choose the second option, "Format Document", it will put double quotes to every key! Im so happy that I'm learning Angular, thanks for this tutorial Angular team! :))
great tip!
I wish I read this comment before manually formatting the doc
Thank you for the tip!!
That was a good tip, i just asked the chatgpt to do it for me, but this is even better :)
Thanks! Not formatting ids as strings, returns in Not Found when requesting to json-server at localhost:3000/locations/0 (or any other), so details page is not showing correctly
I managed to finish the playlist.
Big thanks to Mark for putting this together in an easy to consume format, I think the less than 15min videos is the perfect duration for quick lessons.
I really wish I had access to this when I was first learning Angular.
I even learned about javascript features I never used but heard of, will definately use them from now on i.e. non-null assertion, nullish coelecing, optional chaining.
Last Feedback:
- It would be great to have an "advanced features" section after the "basics" tutorial in the future, it makes a nice divide between, "you are in the basics of angular for a small app" to "here are the more enterprisey features" and I think fetch api CRUD section should be in basics, 99% of apps will need to fetch data from somewhere, httpClient can be in advanced, maybe after a basics in rxjs section (Still part of advanced series)
- I noticed that in Angular 16 we use app.config.ts instead of main.ts but I guess that's for next version
Otherwise I'd say this is perfect, no major complaints, well done and looking forward to more.
I really appreciate that you use fetch and point out that the HttpClient is for more complicated cases.
If you're not getting the housing location properties on the details page after refactoring the service, update the db.json file with double quotes for the value of "id" properties. ("id": "0")
That fixed it, thank you!
Thanks!
This was great thanks, really enjoyed it , and it helped clear up some concepts I hadn't quite grasped yet.
I wanted to take a moment to express my heartfelt appreciation for the incredible content you create on your RUclips channel.Your videos have been a constant source of inspiration and learning for me.
I am eagerly awaiting your upcoming video. Your content has become a highlight of my week, and I genuinely look forward to each new release. Your ability to consistently deliver high-quality videos that educate and entertain is truly commendable.
You have built a fantastic community around your channel, and I am grateful to be a part of it. Keep up the excellent work, and know that your efforts make a difference in the lives of your viewers.
Once again, thank you for your incredible content, and I eagerly await your upcoming video. Keep inspiring and making a positive impact!
love from India😊
Finally completed, I can now start my internship task at the company. Thank you guys.
congrats!
Watched the whole series by curiosity.
Amazing content!
Cheers from Brazil.
esse curso é muito ruim kkkk
Ty from the React enjoyer. Very informative. Would be great to see a similar tutorial for Angular 17.
Loving Angular 17. Following this tutorial and using the new control flow syntax
Great tutorial! I really like the way you introduce things!
thanks Mark! Its was gr8 learning with these tutorials
Excellent short tutorial
Thanks for the great learning content, this was such a smooth and informative watch from start to finish.
I'm very happy to see this in an official tutorial. I have also been using async/await a lot on my applications, and it works great, the code is much more readable than Observables. For most typical HTTP use cases, would you recommend now to use mostly fetch and async/await, and leave the Angular HTTP Client for special use cases, like building an auto-complete? Thank you for sharing.
Thanks for the very helpful tutorial!
Great job ❤ please keep the videos coming!
Thanks for the tutorial! It has helped a lot 🥰
Thanks so much for the course! ♥ Create more learning content in the future 🙏
The completed code from this lesson is different from the video tutorial.
Thank you for these videos! I hope this series will be continued. Tutorials on udemy or youtube are long and are trying to explain too much on the beginning, and they are not completely up to date... I think it's better to learn basics and read about more advanced topics when it's necessary.
It would be great to watch a video about real project structure. I mean how to structure the catalogs with services, UI components, views etc. There's no such video about angular project with standalone components. Videos about Rxjs basics and tests would be really helpful.
All done. Great tutorial.
i really enjoyed this journey, it was funny and thank you and wish you the best for the next
How could I solve the problem of having to click the search button with the mouse for the filter to work? If we simply press the Enter key, the page reloads as if we hadn't filled out the input.
Fantastic tutorial 😸 thanks a lot.
nicely done sir!
Why not HttpClient?
HTTP client is a great option in a lot of use cases but since this is targeted towards developers new to Angular we decided to use fetch to keep the amount of new concepts low. Would you like us to make content around HTTPClient? Would that be valuable?
@@Angular yes please, with HTTP Client
Yes, please make a video to use HttpClient in angular 17 because it is constantly giving me null injector error in angular 17.
Yes please. Especially because this course here seems to promise to focus on HTTP: "HTTP in Angular"
Thank you so much! I covered all the video series and it is great. One question, why don't you use separate html component? why do it like in React? Is there an advantage?
Is it a good practice to write logic inside a constructor method? I thought the constructor in Angular is used only for dependency injection...😮
Thank you so much 🔝
Thank you Mark! :)
"Go build, geats apps!" Amen !!!!
Thx from Brazil
I thought that it is standard for Angular to use a specialized service and RxJS
The JSON part does not work for me. The website doesn't generate, but the terminal says it's running. The filtering service doesn't work either, even without the json changes. Might be because of package updates. Let me know if someone else had the same problem.
same Angular v16.0.1 and Node v18.15.0
My search filter isn't working correctly. I type a city name in, and all the results continue to show. Has something changed between then and now? I'm on Angular CLI 18.0.5 and Node 20.15.0
I am seeing the same thing. Everything in all the other lessons worked perfectly. But, the last part of the last lesson's (lesson 8's) filter by city. The app ignores the filter and returns all the homes. Angular v16.0.1 and Node v18.15.0
Great tutorial
Thank you for the feedback - what was your favorite part?
thanks mark
good job man gg wp thanks for these very nice videos and im looking forwards to more videos
Managed to make a filter for state and cityname but cant make the enterkey to be the same has pressing the search button (keydown) doesnt work
I couldn't get the city filter to work. What version of angular an node are you on? Thanks!
@@tuba-inxs latest 18
at 10:49 he says name instead of city. When searching make sure you search by city and not name
Good job
Is value returned by the getHousingLocationbyID method is it a copy or a reference? If it’s reference does that imply that caller can change the source of truth from the call site or does angular have a way of making it return a copy?
#filter is similar to using jquery selector👌
i can`t create touch db.json ...it shows error in path..how to solve this problem
Run this command first. npm install touch-cli -g
after i did all the changes after the min 7:21 and saved everything, when i go to details page of any house, the image of the house doesnt load, and i believe its because when i tranfer it to db.json i had to switch to " instead of ' for the url of the image, is there a way to solve this??or is it something else that may cause the problem?
Check the console for any errors. I had a misplaced ']' at one point that resulted in the same issue.
dude, check the link to the photo, a hav the same problem, for some reason the link to my images was diferent.
I also had the problem, and I could not see the housing, but problem was solved that way :
1) I had missed a slash in the url link in the file housing.service.ts
the correct link has helped for the first page , to see all the housing together
2) then i had another error in the getHousingLocationById from the same file : instead of the apostroph i needed the grave accent so that the iD can be evaluated
... I muss say that the file in the correction zip are not really reflecting the tutorial at this level, because there is no db.json file and the housing are still hardcoded in the housing.service.ts
great tutorial. it was interessant.
Update the db.json file with double quotes for the value of "id" properties. ("id": "0")
When the angular is abble to run 100% without depends on zonejs how http call will be? Will rxjs be removed in the future?
hi, zonejs and rxjs are diff things and one dont depend on another.
when signals pass to stable zonejs will not be necessary. zonejs is only for sync reactivity.
in other hand, rxjs is used in reactive forms, httpclient (provided by Angular) and in some features of the router. rxjs for async reactivity.
when zonejs is removed the way to http calls will not change, since you can do by using fetch api (provided by browsers) or by httpclient (provided by Angular).
which way is faster HttpClient or fetch ?
what about rxjs ???😐
That should go in advanced series
why i got this error ?
Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.
What about Feature_module and lazy loading?
How to add feature-module in --standalone era?
You can actually lazy components still with standalone. Check this out:
angular.io/guide/standalone-components#lazy-loading-and-default-exports
It’s not a good Signal..
I'm afraid the Angular team will gradually remove RxJS from Angular
Maybe from the core but they will still provide tools for it, see rxjs-interop package in angular
This is the first one that doesn't work. The user is either starting the json server OR the web server but not both. One trick for anyone stuck here you can open up a new terminal click 'terminal' / 'new terminal' although there's probably better solution this is the only one that worked for me.
You forgot about signals
signals is opt-in
Signals are still in a developer preview which means that we haven't finished all of the features just yet. We'll be making making more content to cover signals, too. Thanks for checking out this course.
J'ai aimé la demonstration, vraiment elle est super mais comment produire un rendu sur mobile. Merci cordialement
The app should be responsive so it'll work on mobile with no changes for you. Let us know if this doesn't happen
aw rayt way togo!
observables for http was the worst thing to happen to angular imho
For Hello World apps, yes
For some reason the search and filter is not working for me. I also downloaded the final code and ran the application and it does not work there either. I watched the video twice and followed along and still nothing.🥲
I've had the same problem, but was able to overcome it. I had an extra { } in the last arrow function. Make sure you don't have { } in filteredResults' last arrow function! It should be:
this.filteredLocationList = this.housingLocationList.filter(
housingLocation => housingLocation?.city.toLowerCase().includes(text.toLowerCase())
);
Hope this helps!
Thank you
Great tutorial! I really like the way you introduce things!