Angular SPA中不需要的页面刷新

Question

I have Angular routing setup using HTML5 mode like so:

app.config($routeProvider, $locationProvider){

  $locationProvider.html5Mode(true);

  $routeProvider.when("/", {
    templateUrl: "/views/login.html"
  }).when("/dashboard", {
    templateUrl: "/views/dashboard.html"
  })

});

Now I move between routes with simple links like this:

<a href="/dashboard"></a>

This works fine, except I seem to get a full page reload when I click the link. Angular isn't meant to do this so I'm not sure what's going on.

It may be worth noting that in reality my script is substantially more complicated than this, but having debugged everything, I can't see anything wrong other than the fact that I recently switched to the HTML5 mode.

How do I stop the page reload?

Answer 1

Try using ui-sref directive. It will use $state service to load a page.

<a ui-sref="yourroute">Link</a>

You have to configure your routes with $stateProvider to use route names.

Answer 2

If you're using Angular routing your link should start with a hash to prevent the browser from navigating away from the page. Have you tried:

<a href="#/dashboard"></a>