2

This is my navbar.html 

<ul class="white">
      <li><a href="/signup">Signup</a></li>
      <li><a href="/challange">Create Challange</a></li>
      <li><a href="/feed">News Feed</a></li>
    </ul>

This is my app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

Click on an each menu link its feel as loading an entire page even i run this code in localhost. But, I seen many angular project page is not loading entirely just change that url only.

My question, this problem is arrive from href? shall I use roouterLink to overcome this issue?

Rijo
  • 2,963
  • 5
  • 35
  • 62
  • 1
    You should always use routerLink if you are using the Angular built in router as it's best practices and I'm sure there's plenty of behind the scene benefits – Molik Miah Nov 07 '17 at 00:51
  • Can u please elaborate – Rijo Nov 07 '17 at 01:12
  • 1
    Sorry I'm typing on my mobile and it is a bit difficult. But one example is in routerLink you can easily navigate to a parent component or go up 2 levels in the routing by doing '../' or '../../' which you can't do in href. – Molik Miah Nov 07 '17 at 01:16
  • Thanks for your reply! I tried Its working fine. Before It was loading an entire page, Now it's working – Rijo Nov 07 '17 at 01:18
  • 1
    it might be worth noting that sometimes it actually reloads the whole page when there is an error. because the application sometimes reloads it can clear out the console output, so it might be worth ticking the box which lets you persist your console output – Molik Miah Nov 07 '17 at 15:47
  • You can check my answer for a detailed overview:- https://stackoverflow.com/a/58632191/8389728 – Aniket Oct 31 '19 at 09:31

2 Answers2

2

routerLink:

  • It is a directive in angular2+
  • Navigates to New Url and the component is rendered in place of routeroutlet without reloading the page

href:

  • Its an attribute of a tag
  • html anchor tag attribute to navigate to another page and reload the entire app
Mohammad Jamal Dashtaki
  • 1,415
  • 1
  • 16
  • 23
-1

In angular you can define different states and then route to/render those states (using ui-sref as compared to href in simple html) without reloading page. Only url gets changes. Read more about ui-router here and here

Check this fiddle for demo code

Muhammad Usman
  • 10,039
  • 22
  • 39