How to route in Angular - Learning Angular (Part 5)
Вставка
- Опубліковано 23 сер 2024
- Learn all about routing in Angular, a way of navigating between components. This video guides you through to enable routing in the application from passing data using parameterized routes to retrieving the information using the ActivatedRoute feature.
Resources:
Completed code for this lesson →goo.gle/44xzZ0A
Catch the next episode, Services in Angular → goo.gle/3p8ZVzs
Watch more episodes of Learning Angular→ goo.gle/Learni...
Subscribe to Angular → goo.gle/Angular
#Angular
![[UA] Team Vitality проти NAVI | IEM Cologne 2024](http://i.ytimg.com/vi/wttO1zVRTC0/mqdefault.jpg)
This dude is super positive. It makes me smile.
I really like the content and presentation style. I tried my hand at Angular last year but gave up as I couldn’t get routing. This video gives me confidence to try it again.
You guys should update the documentation, because I am struggling with Tour of Heroes where I have to follow other instructions that do not work on my Angular version
This week, I started learning Angular and encountered some difficulty with the router. I consulted the documentation, but it wasn't until I came across a helpful video that I managed to navigate my pages successfully. However, I'm working with Angular 17 and I'm unsure if this approach is the best practice to use." tks for angular team and community.
I was stuck with the dynamic route, thanks a lot!
Glad it was helpful
The anchor link works only in case you set the slash in front of the details: Learn More
Hi, few thins to point out:
if you are using v16 and dont use the provide files, the config should be made in a file "call app.config.ts". instead of using "the main.ts" file
- why not inject the deeps of router in the construtor instead of using inject function. what is the diff between inject as constructor params or using inject function?
- in "routes.ts" why not just "export const ..." instead of export default and using naming import?
I want to like Angular, but it confuses the crap out of me.
i thought that angular dead comparing by react , fortunately three days ago you come up with this tutorial
Well done explained. Not that what I looked 100% for but very interesting! Does the routerlink in the tag refresh the page and load or no?
The tutorial I started with did not use standalone, so this doesn't work for my application. Do I have to start over again? This is frustrating.
Update and a little rant: Migrated succesfully to standalone and I could follow along again (steps are well documented if you google). I tried this with another project that I did in a course a few years ago and it was a dependency nightmare, gave up on that one.
If I'm correct the latest version of ngbootstrap is not up to date with the latest version of angular? I'm doing stuff with midi files, most of the libraries are old and outdated and need to be configured by hand.
It's 2024 and it feels like web development is stuck in the dark ages (had a career in vfx for 24 years and I thought that was complicated stuff...)
What I'm missing here after this change Learn more link doesn't work any more. "details" work but not this.
Aa sorry I was too hurry
At 9:03, in Angular 18, need to import RouterLink instead of RouterModule
i used routerModule and it worked, switched to RouterLink and also worked. Great to know that Angular doesn't break old versions
I would recommend using Dependency Injection (DI) in a different way as shown in the tutorial.
First, dependencies usually inject in the constructor rather then manually.
Further I believe using the OnInit lifecycle (which is probably left out for simplicity) is often a better idea to do initialization then the constructor.
This is my code:
export class DetailsComponent implements OnInit {
housingLocationId = 0;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.housingLocationId = Number(this.route.snapshot.params["id"]);
});
}
}
Hello, great tutorial. My question is, why is the router setup so different from what I have when I add router while creating the project(ng new). Its so different and both yours and mine is angular 15.
Love this guy)
Thank you Angular team!
Routing setup does not seem to work, the moment I add "provideRouter(routeConfig)" in the providers array, I get a bunch of error messages one being "Argument of type '{ providers: (ComponentInputBindingFeature | EnvironmentProviders)[]; }' is not assignable to parameter of type '(CompilerOptions & BootstrapOptions) | (CompilerOptions & BootstrapOptions)[] | undefined'.", not clear what's the issue here because even the documentation is the same.
It seems you did the same error as me.
Use providers: [
provideRouter(routeConfig)
]
And not
providers: {
provideRouter(routeConfig)
}
Thank you I had the same issue! @@ArmenJanamyan
Hi, I'm a beginner in Javascript. I'm still confused after finishing these great videos. I found another video for beginners like me in Angular and this is the link: ua-cam.com/video/lIb_gnleUns/v-deo.html . I've tried this part 5 and combined this part with it, and the result is awesome.
I'm sorry, I don't mean to thumb down all parts of videos. I've already thumbed up your video, sir.. These videos are the ideal starting point for learning Angular and i'm trying to do my best. Thank you for the first impression that opened my mind to learn more about Angular. My journey will be great after this ! 😁
How create routing if you have one Component where change :id and change load data from API?
By having a non standalone app does it change?
@14:06 you show the end of the string to be added and then move off making it difficult to complete the task without rewinding the video
For those wanting to see the cropped line at end: this.housingLocationId = Number(this.route.snapshot.params["id"])
You solved my problem
nesse caso o standalone está "false" ?
Amazing toturial for beginners
Is this an outdated version of Angular?
Yes
i don't understand why you have to make everything too small when you have the entire blank screen for free. i can barely see a text even in full screen with 4k 14inch lap top. negative comments is positively necessary.
the tutorial is too fast and many topics gathered at once...please break it down in small tutorials
I don't understand why if I follow this tutorial minutiously, I always get ERROR messages that takes me hours of research for no help at all, just confusion and frustration. Then when i finally give up, I just download the code of the lesson, open on vscode and give a npm install and ng serve, then Voilà, the project comes back showing on browser without errors anymore. Seriously, WTF? Angular can be very tiresome, mostly when following Bad tutorials like this. Does anybody know of a Good tutorial beginner friendly we could be following?
tips from me just relax and take a breath, keep your mind calm and finally see a bit minute of step then write that lecturer code to yours code. inshaallah it works
pretty bad tutorial for beginners
which part makes it bad for beginners? What's missing?
@@Angular After adding all the css the tutorial becomes very confusing, because you added the detail component in a different order than in the writen/text tutorial on the angular website..
mess
Watch more episodes of Learning Angular→ goo.gle/Learning-Angular
definitely not good, as why use unix commands, lol
main.ts? Where did that come from?
main.ts is a file that should automatically be generated when setting up a new angular project.
If its not there (in the "./src" dir) then you can just create a new, empty main.ts file and use this