Angular Router - The Basics and Beyond

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 พ.ย. 2024

ความคิดเห็น • 105

  • @love-the-truth777
    @love-the-truth777 6 ปีที่แล้ว +39

    These 12 minutes are so packed, if I didn't know most of the concepts already before I would have to watch every minute 10 times. But really good and useful information!

    • @mparagames
      @mparagames 2 ปีที่แล้ว +1

      still, it's good that it gets straight to the point, i use react but never use angular before so i was a little bit confused on how to create routing at first

    • @simbarashemaunga5575
      @simbarashemaunga5575 2 ปีที่แล้ว

      He makes tuts for people that can already code lol

  • @mattthomas8589
    @mattthomas8589 2 ปีที่แล้ว +11

    You honestly have a gift my friend. The level of understanding you have is inspiring, but you also have this ability to teach in a way that takes into consideration questions that both newcomers and veterans will likely have and to cover them seamlessly in your content. Well done

  • @oneofthenicks2885
    @oneofthenicks2885 2 ปีที่แล้ว +3

    I've been trying to troubleshoot for hours as to why my app would sometimes flash a blank screen between routes. The course I started learning angular from was legitimately using hrefs instead of routerLink directives as the links to the routes, so I thought that was the normal way.
    Thank you so much, my eyes have been opened.

  • @tonysmarks3578
    @tonysmarks3578 5 ปีที่แล้ว +86

    I was like , oh! I can learn some from router, and then I was like what's firebase? how did you inject firestore? what is switchmap ??? ?????? WHAT????

    • @erwincalayag9463
      @erwincalayag9463 4 ปีที่แล้ว

      LMAO!!!

    • @Andrei-xb1pz
      @Andrei-xb1pz 3 ปีที่แล้ว

      Haha...
      Yea, now I understand why people like React (also Vue.js)

    • @lubomirpacheliev363
      @lubomirpacheliev363 3 ปีที่แล้ว +1

      @@Andrei-xb1pz yeah, angular is a bit of a hassle to learn, but imo as someone who is a react phanatic angular is also worth your time to make into one of your assets

    • @zee_12
      @zee_12 3 ปีที่แล้ว

      @@Andrei-xb1pz Actually react sucks

  • @kornelsiket3420
    @kornelsiket3420 6 ปีที่แล้ว +25

    Wish I could have learned all these things by your videos. You manage to pack a whole series worth of things into single videos. :)

    • @Fireship
      @Fireship  6 ปีที่แล้ว +22

      That's my goal :) I try to spare people the lost time sitting through a 5hr course.

  • @bieldozap
    @bieldozap 3 ปีที่แล้ว +1

    This video really provides a ton of information. It's almost twelve minutes long, but I spent almost 1 hour to understand it. It will be helpful if you draw what he's saying.

  • @Fireship
    @Fireship  6 ปีที่แล้ว +18

    Hey everybody, this is installment #3 of Angular Basics. Let me know what topics you want to see next in this series :)

    • @carrillocarlosce
      @carrillocarlosce 6 ปีที่แล้ว +4

      It would be great a tutorial about joining observables and working with async pipe in the templates, use 2 async pipes in a *ngIf or some workaround for this, nested async pipes all this stuff

    • @canofsteam
      @canofsteam 6 ปีที่แล้ว +1

      More on resolvers would be great.

    • @mohammadzahid4390
      @mohammadzahid4390 6 ปีที่แล้ว +1

      Tensorflow.js is a hot topic.. some more videos on that would be great..!

    • @mateja176
      @mateja176 6 ปีที่แล้ว +2

      A video on modules would be great, for example when and why use core and shared modules etc.

    • @aakashthakur1415
      @aakashthakur1415 6 ปีที่แล้ว +2

      Angular SSR and PWA if you could cover would be great!!

  • @mbusilukhele5809
    @mbusilukhele5809 2 ปีที่แล้ว

    Now that was faster than going through documentation, thanks buddy.

  • @errolschmidt3762
    @errolschmidt3762 6 ปีที่แล้ว

    Yesterday I was searching for a really good video on the router. And then it appeared at the top of the list! Thanks!

  • @malikevans3525
    @malikevans3525 6 ปีที่แล้ว +1

    Dude your presentation and delivery are unmatched.

  • @carrillocarlosce
    @carrillocarlosce 6 ปีที่แล้ว +3

    Angular Firebase always right to my needs XD thanks

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      Awesome, thanks for watching!

  • @mateja176
    @mateja176 6 ปีที่แล้ว +7

    Prefetching the data for other child routes is such a cool idea! However, for lazy loaded routes the resolver is well, lazy. How would you prefetch data in this case?

  • @TheEbencarljo
    @TheEbencarljo 5 ปีที่แล้ว

    I've been looking for resolve since a while, that helped me. Thanks.

  • @davidtheprogrammer
    @davidtheprogrammer 6 ปีที่แล้ว +1

    Love your videos bro! You always do a great job presenting the ideas in a simple way that even a beginner like me can get.

  • @bensonmwaura9494
    @bensonmwaura9494 6 ปีที่แล้ว +1

    Great insights. Nice touch on making the guard reusable...this coupled with SEO & genius!

  • @webmaster4095
    @webmaster4095 5 ปีที่แล้ว

    Thanks for your lessons.

  • @gronavet
    @gronavet 4 ปีที่แล้ว

    very good tutorial. best watched at a speed of 0.75.

  • @siyedyoussef3202
    @siyedyoussef3202 6 ปีที่แล้ว +1

    Great vidéo as Always 👍👍👍

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      Thank you Siyed!

  • @zoojs
    @zoojs 4 ปีที่แล้ว

    Thanks a lot! Very informative video

  • @jthies73
    @jthies73 4 ปีที่แล้ว

    I love your videos so much!! Thank you for putting in the effort =)

  • @pandarzzz
    @pandarzzz 6 ปีที่แล้ว

    Thank you for sharing this informative video! 🐯🖐🏻

  • @mateja176
    @mateja176 6 ปีที่แล้ว +1

    Man, that new logo is as hot as (angular)fire!

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      Thank you Mateja :)

  • @Bielik20
    @Bielik20 6 ปีที่แล้ว +2

    Great video, got one question though. Firebase gives us this nice change detection if someone else makes changes. When using resolver we loose that functionality. How could we use power of resolver while still maintaining ability to listen for somebody else changes?

  • @camiloandreselguetabasso2429
    @camiloandreselguetabasso2429 6 ปีที่แล้ว

    muchas gracias! justo lo que necesitaba :)

  • @chfr
    @chfr 2 ปีที่แล้ว

    I wish this video could've talked about how to set the title tag with routes.

  • @oleersoy6547
    @oleersoy6547 6 ปีที่แล้ว +11

    "We ain't found S!#T!" Nice touch on the 404 page :)

  • @sourishdutta9600
    @sourishdutta9600 6 ปีที่แล้ว

    Do a video on Angular change detection.

  • @daniellaerachannel
    @daniellaerachannel 6 ปีที่แล้ว

    Great, awesom tutorial, thank s a lot! can you do please more ionic angular tutorial? or some cross platform /PWA applications? thanks !!!

    • @Fireship
      @Fireship  6 ปีที่แล้ว +1

      Yes, expect an Ionic v4 tutorial very soon

    • @daniellaerachannel
      @daniellaerachannel 6 ปีที่แล้ว

      can't wait for that! thanks!!

  • @DerJP
    @DerJP 6 ปีที่แล้ว +5

    Hey :) Love your videos!
    Could you tell me what the background music is called? Thank you.

    • @Fireship
      @Fireship  6 ปีที่แล้ว +2

      Thank you :) You can find it here audiojungle.net/item/ambient-deep-loop/19729970?s_rank=2

    • @DerJP
      @DerJP 6 ปีที่แล้ว +4

      Angular Firebase finally... Thanks a lot! :D

  • @sachinmishra7692
    @sachinmishra7692 6 ปีที่แล้ว

    Will router children attributes support host and hostcontext for the subsequent components ? If yes could please make a video on that

  • @adhivenkatesh3431
    @adhivenkatesh3431 5 ปีที่แล้ว

    Nice video , did you create any video for global error handling using angular 7 , if it is please share the code with video link , thank you .

  • @eugenenovikov671
    @eugenenovikov671 3 ปีที่แล้ว +3

    it is not basic router, it is advanced router, u deceive us

  • @sourishdutta9600
    @sourishdutta9600 4 ปีที่แล้ว

    Hi Jeff!! Is there any way we can achieve like, After login depending on the user like it’s a customer or an Admin, we will load all the respective modules using custom Preloading strategy. Like I want to load only login module for the first case after login depending on user type it will load respective modules ?? Thank You so much :)

  • @ekhmoi4552
    @ekhmoi4552 6 ปีที่แล้ว

    Liked & Subscriber. Good Luck!

  • @jonathanmcalexander2778
    @jonathanmcalexander2778 6 ปีที่แล้ว +63

    is it me, or does this guy speak too fast? im like pausing every 3 seconds trying to comprehend what he said.

    • @marcelotorreblanca9276
      @marcelotorreblanca9276 5 ปีที่แล้ว +1

      you really need to have hands on experience to get all what he says, I'll recommend to any other viewer (for I believe you now understand what Jeff says, as this comment was 10 months ago), going to his page and ask for his Angular Fire Book. It amazing and can help you going on track.

    • @dnav10
      @dnav10 5 ปีที่แล้ว +4

      I watched this video a couple days ago. "Hoping to understand routing" I just got confused. Today I was trying and failing to make routers work, then I came back to watch this.. and I finally have a good grasp about routing!

    • @eugenenovikov671
      @eugenenovikov671 5 ปีที่แล้ว +2

      me too pausing every 3 seconds on all this course

    • @pluraltest9242
      @pluraltest9242 5 ปีที่แล้ว +1

      It's just you

    • @marcinjarzebski9446
      @marcinjarzebski9446 5 ปีที่แล้ว +2

      The speaker calms down when on 0.75 speed. He actually sounds really relaxed like this.

  • @seanghay_yath
    @seanghay_yath 6 ปีที่แล้ว

    Hey Angular Firebase, I would like to ask you a question related to Angular Router. What if I want to redirect the landing page '/' to other URL based on **User Roles** how could I do?
    Admin -> '/admin'
    User -> '/user'

  • @ofershaham1525
    @ofershaham1525 3 ปีที่แล้ว +1

    The last 60 seconds includes a music which is really disturbing while trying to follow your explanation.

  • @nickstylezmedia
    @nickstylezmedia 5 ปีที่แล้ว

    @Fireship At 10:50 you are using `valueChanges()` and `first()` but I am using `snapshotChanges()` because I need the actual document ID from Firebase. How to use `first()` then and what exactly is that?

  • @TheCodebookInc
    @TheCodebookInc 5 ปีที่แล้ว

    Hey, I needed help in generating question and answer form application where questions are coming form the backend. Can you show it on your videos. just the basic ides would be great. and I don't wanna make form for each question.

  • @aCitizenJOSerased
    @aCitizenJOSerased 9 หลายเดือนก่อน

    Hi Jeff. At 2:51 how do import the detail component with one click?

    • @thebigFIDDLES
      @thebigFIDDLES 8 หลายเดือนก่อน

      Auto Import package

  • @wazbat1
    @wazbat1 5 ปีที่แล้ว

    Huh. I've followed this to a T and it doesn't work. I get an error stating that query(":enter, :leave") returned 0 results

  • @paradix847
    @paradix847 4 ปีที่แล้ว

    What's that font called that you're using in the webapp.

  • @Dr3nzi
    @Dr3nzi 2 ปีที่แล้ว

    Actually someone that knows what Anuglar does

  • @matheuscosta5330
    @matheuscosta5330 5 ปีที่แล้ว

    Thats awesome thanks very much

  • @jojogoeschile1195
    @jojogoeschile1195 5 ปีที่แล้ว

    Hi Fireship,
    is there anything you have to consider whilst "serving" the Project? Because I coded all right and even downloaded and tested die Angular "Tour of heroes" and the Routing doesn´t work. I tried to install Angular on a second Laptop. Didn´t work either. It just works with the "href" command but not with "routerLink". Do have any idea why?

  • @DanielRLuke
    @DanielRLuke 6 ปีที่แล้ว +2

    Now you're cutting into Deborah Kuratta's territory...

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      Hey Daniel, long time no see. Is that good or bad? Looks like she does long-format courses...

    • @DanielRLuke
      @DanielRLuke 6 ปีที่แล้ว +1

      Oh, I was kidding. She has a deep dive on the router over at Pluralsight.

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      Oh gotcha.

  • @bumpwavy
    @bumpwavy 3 ปีที่แล้ว

    im getting this: If 'router-outlet' is an Angular component, then verify that it is part of this module.

  • @TT-pu1lw
    @TT-pu1lw 4 ปีที่แล้ว

    Can anybody tell, how to preserve query parameters on browser reload ?

  • @ezekieltojoshan
    @ezekieltojoshan 6 ปีที่แล้ว +3

    That's why I still using angularjs. Lot's easier. Love it btw but I can't understand a single line of code.

    • @Fireship
      @Fireship  6 ปีที่แล้ว +6

      I started with AngularJS and vanilla JavaScript. It takes time to get used to TS, but once you do you will never look back.

  • @armandmugabo1170
    @armandmugabo1170 2 ปีที่แล้ว

    awesome

  • @phiquang8503
    @phiquang8503 5 ปีที่แล้ว

    What is color theme ?

  • @codingmutant9066
    @codingmutant9066 4 ปีที่แล้ว

    he is fast...even for robots

  • @PAVANKUMAR-vj8oi
    @PAVANKUMAR-vj8oi 3 ปีที่แล้ว

    vscode theme name ?

  • @blackclover5561
    @blackclover5561 6 ปีที่แล้ว

    Is this the same as MVC5?

    • @Fireship
      @Fireship  6 ปีที่แล้ว

      No, it's quite different AFAIK

  • @hassaanhameed
    @hassaanhameed 2 ปีที่แล้ว

    🔥

  • @rohitthadakapalli54
    @rohitthadakapalli54 6 ปีที่แล้ว +1

    Too much stuff going too fast in 10mins! :/

  • @qwertt14
    @qwertt14 4 ปีที่แล้ว

    I definitely didn't understand PreloadGuard hahah

  • @nekoma_mono
    @nekoma_mono 11 หลายเดือนก่อน

    🎯 Key Takeaways for quick navigation:
    00:05 🚋 *Ethical dilemma scenario presented: Trolley dilemma with potential harm to five workers.*
    00:52 ⚖️ *Discussion on the moral complexity of choosing to harm one person to save five others.*
    01:06 💔 *Caution against the ethical implications of killing an innocent person, even for a seemingly noble cause.*
    01:28 🤔 *Reflection on the consequences, turning the familiar into something strange and irreversible.*
    03:24 🎵 *The video transitions into a musical segment, shifting focus from ethical discussions to experimental sound design.*
    Made with HARPA AI

  • @TarekFaham
    @TarekFaham 3 ปีที่แล้ว +1

    That was very hard to follow...

  • @MathijnvanBerlo
    @MathijnvanBerlo ปีที่แล้ว

    What is this AngularFirestore? Would be a great video, but you're just going to use something that you won't explain. Also, I can't find this on the internet and/or import it. So, now I'm left with just some wasted time. Next time explain what it does, and or how to replace it with something else....

  • @anilkinikar
    @anilkinikar 5 ปีที่แล้ว

    Very good content but too fast. Tutor not giving chance to understand the concept. Cannot continue with this video.

  • @Jeff99
    @Jeff99 6 ปีที่แล้ว

    This is a very informative video but you might want to slow down your speech a little. Not everyone is a native English speaker. What's your hurry?

  • @ak-loz
    @ak-loz 5 ปีที่แล้ว

    I have to give this one a thumbs down. It's strange when you jump from your VS Code to Firebase and already have your collection set-up. It makes it hard to follow alongside the example if I hadn't used Firebase before so I got lost.

  • @true_visual
    @true_visual ปีที่แล้ว

    2:40 baby is crying or something? XD

  • @GavinWoodthebarbarian
    @GavinWoodthebarbarian 5 ปีที่แล้ว

    you go way to fast, one cannot keep up with hwats going on.