Angular - "routerLink" vs "href" and Losing State
HTML-код
- Опубликовано: 14 авг 2018
- "Why does my app lose its state, after I reloaded it or switched between pages"? A question asked by you from time to time and answered by us in this video. Let's have a look.
----------
Source Code: github.com/academind/angular-...
Learn Angular in our "Complete Guide" course: acad.link/angular
Dive into Angular Material: acad.link/ng-app
Want to learn something totally different? Check out all other courses: academind.com/learn/our-courses
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice! 
Наука
Explained everything perfectly! I was concerned about routerLInk and website indexers not being able to index properly with the missing href but this tutorial shows that routerLink when compiled creates an href in the link but disables the standard browser's href behavior giving control to the routerLink to load the correct component. Well done!!!
Very useful video. Just have 1 questions, state not maintened, if I use two components in different tabs. Used the same logic like created router config, used routerlink, router outlet.
Can you please explain it why state not maintained and data gone, while moving from 1 component tab to another component tab?
What if I need the input field only in the products page? Will it save the state of input field when I navigate to products from other pages?
Helpful enough! Thank you!
So in summation. A-href sends a full DOM reload, reloading the app causes angular's state to reset for all components which is against the idea of SPA. Using routerlink, refreshes the with the data of the component on click so you maintain the app state and any components operating independently without issue. Doesn't this approach also work the same with react router and vuex-router? Component based refreshing opposed to app-refreshing?
are components still needed if you are using href?
EDIT: OMG THANK YOU SO MUCH, I FOLLOWED WHAT YOU DID AND I CAN NOW NAVIGATE THROUGH DIFFERENT PAGES/COMPONENTS... I've watched a lot of videos and yours is the only solution that worked for me!!
Hey buddy even with router link I lost my state basically I had uploaded file and then navigated to another page/component but when I again clicked on the original page I saw that the file that was uploaded was lost.dont know why it happened ?
how to pause youtube video on a scroll event in angular4.
Please help
I want to jump from one page block to another page block,I am pasing block I'd to another page navigating to page but not to the block.Can you tell me how to do this??
so the whole angular paradigm is throwed throught the windows if using href
I tried using href and routerLink both, everytime I get the same problem. When I click on the link - URL gets changed but the page does not undergo any change. the Console shows a warning, "A router outlet has not been instantiated during routes activation"
I got a problem with this routerLink. On my LoginComponent, I click on RegisterComponent then the RegisterComponent appears under the LoginComponent while the LoginComponent is still there. How do I fix this issue and how do I hide it?
big fan of your tutorial, I have a request for you... can you make a tutorial connecting Angular with wordpress Rest API?
Thanks .
Hi. Opening the link in new tab giving me the 404 not not found.
please guys don't stop angular tutorial! a real app tutorial would be appreciated! thanks a lot guys
We definitely plan to create more Angular content, a complete project like the Vuetify project last year is also something we have in mind, but we'll see.
It may sound irrelevant but a video on service vs factory and which to use when ?
#Academind
thanks
how i can use routerLink in dynamically generated HTML-Code?
Why Angular doesn't use the href attribute and create other?
Sir what $event does?
Thanks for the nice explanation
Happy to read that you like it Sagar, thank a lot for you great feedback!
Great video! Make more like this, please :)
Happy to read that you like it, thanks a lot for your great feedback!
...this is why we don't use MacBooks. lol ;-P
Great tutorial! Thank you! Yet again a quick watch of your video and now it make sense.
merci !
nice tutorial..
Do you have plans for videos about graphql ?
GraphQL is definitely an interesting topic, so chances are that we might create some videos about it. We don't have any concrete plans at the moment though.
Ay its Max's homie
Hello :)
Please do a tutorial on Angular 6 authentication with Firebase and AngularFire please
If you want to find our more about these topics, our Angular Material course might be interesting for you Faiz: www.udemy.com/angular-full-app-with-angular-material-angularfire-ngrx/?couponCode=ACAD_M
Hello, you are from Germany?
Yes, we both are from Germany :)
Cool, do you speak German?
Yes we do ;)
Cool! Just ask some money from Max to buy A/C to the office =)
Thank you for your comment Chrisik! No need to ask (we run the company together), but I guess the background noise of the A/C would be kind of distracting :D
welppp... guess i'll have to learn angular... nott baddd.
Definitely not a bad idea in my opinion Stephen, I think we have "some" nice resources to get you started, just in case ;)
academind.com/learn/angular
Isn't this the very concept of Ajax?
My laptop works like a hot macbook all the time 😎
That's not good Mohamed, I must say that this was the first time in almost two years that I had problems like that.
First
Is it just me or does this guy try so hard to mimic Max?
I mean, as in try to copy his body language if you know what i mean xD
Nevertheless, Nice to tutorial. I've learned a ton thanks to this Channel
I guess the reason is that we actually do sit in the same office and record stuff together. No deliberate imitation going on ;-)
I have witnessed this same phenomenon at uni between professors and their postgrad student sidekicks, I bet there is a scientific definition of it.
This is not Max?!
Please do a tutorial on Angular 6 authentication with Firebase and AngularFire please
Assumed they were simply keeping things consistent :) Love your videos, fellas.
A tutorial for people that don't know basics... Why? Need pro tutorials!
Because we also receive questions like that from beginners. We do have a lot of Angular related content though, so not everything is covering the basics only ;)
academind.com/learn/angular
This is hard to watch. Its like Max but with another face. Stop it
Sorry to read that you don't like the video Ville. Max and I work together closely (we even sit in the same room), that's probably where the "similar" style is coming from.
thanks