How to route in Angular - Learning Angular (Part 5)

Поділитися
Вставка
  • Опубліковано 18 лис 2024

КОМЕНТАРІ • 54

  • @davidcooper4327
    @davidcooper4327 Рік тому +46

    This dude is super positive. It makes me smile.

  • @rembautimes8808
    @rembautimes8808 Рік тому +17

    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.

  • @Dmitriy-p4y
    @Dmitriy-p4y 8 місяців тому +8

    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

  • @marlosbross423
    @marlosbross423 9 місяців тому

    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.

  • @guilllermomolinaavila9326
    @guilllermomolinaavila9326 4 місяці тому +1

    I was stuck with the dynamic route, thanks a lot!

    • @Angular
      @Angular  4 місяці тому

      Glad it was helpful

  • @Alexanderscodesamples-x4u
    @Alexanderscodesamples-x4u Місяць тому +1

    Thank you for the video.

  • @oussemabouyahia474
    @oussemabouyahia474 Рік тому +3

    i thought that angular dead comparing by react , fortunately three days ago you come up with this tutorial

  • @Flo22222
    @Flo22222 3 місяці тому

    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?

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

    The anchor link works only in case you set the slash in front of the details: Learn More

  • @forton615
    @forton615 10 місяців тому +3

    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.

    • @forton615
      @forton615 10 місяців тому +2

      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...)

  • @jediampm
    @jediampm Рік тому +5

    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?

    • @0xac829
      @0xac829 Рік тому +7

      I want to like Angular, but it confuses the crap out of me.

    • @javo5270
      @javo5270 2 місяці тому +1

      @@0xac829 same, i am trying to do something with it for some weeks now and i watch so many tutorials but also read a lot of documentations, also started doing things myself but there are so many differences on many tutorials and docs, its so confusing and frustrating

  • @КонстантинСергеевич-ш6с
    @КонстантинСергеевич-ш6с 8 місяців тому +1

    Love this guy)

  • @Guy-Scott
    @Guy-Scott Рік тому +4

    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"]);
    });
    }
    }

  • @Eltopshottah
    @Eltopshottah Рік тому +1

    Thank you Angular team!

  • @viky293
    @viky293 Місяць тому

    Like the ENERGY !!

  • @generativestudio
    @generativestudio Рік тому +2

    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.

    • @ArmenJanamyan
      @ArmenJanamyan Рік тому +2

      It seems you did the same error as me.
      Use providers: [
      provideRouter(routeConfig)
      ]
      And not
      providers: {
      provideRouter(routeConfig)
      }

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

      Thank you I had the same issue! @@ArmenJanamyan

  • @zeprincelini
    @zeprincelini Рік тому +4

    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.

  • @tejas_bajaj
    @tejas_bajaj 5 місяців тому +4

    At 9:03, in Angular 18, need to import RouterLink instead of RouterModule

    • @JogandocomVini
      @JogandocomVini 3 місяці тому +1

      i used routerModule and it worked, switched to RouterLink and also worked. Great to know that Angular doesn't break old versions

  • @obijuank2009
    @obijuank2009 Рік тому +2

    Amazing toturial for beginners

  • @justzcross6236
    @justzcross6236 6 місяців тому

    By having a non standalone app does it change?

  • @nightsurvivor
    @nightsurvivor 4 місяці тому

    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 ! 😁

  • @Noname-i4f3z
    @Noname-i4f3z 8 місяців тому

    How create routing if you have one Component where change :id and change load data from API?

  • @albrough
    @albrough Рік тому +2

    @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

    • @technovelodos
      @technovelodos Рік тому +5

      For those wanting to see the cropped line at end: this.housingLocationId = Number(this.route.snapshot.params["id"])

    • @pogchamper228
      @pogchamper228 11 місяців тому

      You solved my problem

  • @srdouglas1026
    @srdouglas1026 9 місяців тому

    nesse caso o standalone está "false" ?

  • @graydhd8688
    @graydhd8688 Рік тому +2

    Is this an outdated version of Angular?

  • @ohmegatech666
    @ohmegatech666 Місяць тому

    There are so many convoluted steps just to add the router which seems like basic functionality. Why is there not a CLI command to just add all that's required for the router? In fact why doesn't ng new add the router by default?
    Edit: Just looked it up and since version 17 ng new DOES include router by default. Good job Google, took you a while though

  • @Angular
    @Angular  Рік тому +2

    Watch more episodes of Learning Angular→ goo.gle/Learning-Angular

  • @Abhijit-techie
    @Abhijit-techie 3 місяці тому +1

    the tutorial is too fast and many topics gathered at once...please break it down in small tutorials

  • @adimardev1550
    @adimardev1550 Рік тому +15

    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.

  • @CaptainDouchie
    @CaptainDouchie Рік тому +5

    pretty bad tutorial for beginners

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

      which part makes it bad for beginners? What's missing?

    • @Vthoen
      @Vthoen 5 місяців тому

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

  • @TrashCanSystem
    @TrashCanSystem Рік тому +1

    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?

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

      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

    • @ohmegatech666
      @ohmegatech666 Місяць тому

      Make sure to use the same versions of everything as in the tutorials, like Angular, Node, TypeScript etc.

  • @kacperkepinski4990
    @kacperkepinski4990 7 місяців тому

    mess

  • @donmarkham9811
    @donmarkham9811 5 місяців тому

    definitely not good, as why use unix commands, lol

  • @teemusekki1743
    @teemusekki1743 7 місяців тому +1

    What I'm missing here after this change Learn more link doesn't work any more. "details" work but not this.

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

    main.ts? Where did that come from?

    • @mhytos420
      @mhytos420 11 місяців тому +1

      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