Page only navigates when manually refreshing

Question

I seem to be encountering a weird issue in a MEAN-stack app: An anchor link that should be navigating to another page doesn't do so. Instead, it changes the URL in the URL box, but the user has to manually refresh for the new page to show up.

/routes/welcome.js (Node.JS routing):

var express = require("express");
var router = express.Router();
router.get("/welcome", function(req, res, next) {
    res.render("welcome", {title: "Express"});
});
module.exports = router;

/landing.ejs (This is the main page. User starts from here):

<html>
    ...
    <body ng-app="myapp">
        <div ui-view="container" class="head-container">
            <a href="/welcome">Login</a>
  ...
</html>

authController.js:

var app = angular.module(“myapp.controllers.auth", [
  "ui.router"
]);

app.config([
  "$stateProvider",
  function($stateProvider) {
    $stateProvider.state("welcome", {
      parent: "root",
      url: "/welcome",
      templateUrl: "welcome",
      controller: "AuthController",
    })
  }
]);

Assuming the user is at localhost:3000 and is currently looking at the landing.ejs page. If he/she clicks on the "login" link, the URL in the URL box changes to localhost:3000/welcome, but the actual page remains the same, as if nothing happened. But when the user right clicks and refreshes the page, it changes to welcome.ejs. Why do I have to refresh?

Is there anything in the chrome dev console? You may also want to try Login (with the /#!/ before the url) — timsvoice, Nov 24 '15 at 22:19
What do you try to achieve here? You have a server side route `/welcome` and a client side route `/welcome`... If you want to navigate to the state `welcome` in the angular app you have to navigate to `#welcome` — FlorianTopf, Nov 24 '15 at 22:21
Server side routing is not really needed here, I just added it in order to avoid the "you didn't give enough info" comment. There are two sorts of navigation going on, one that is embedded inside the existing page, other that is navigation between different pages (like google.com to yahoo.com). I am trying to achieve the latter here. — DemCodeLines, Nov 24 '15 at 22:23

score 0 · Answer 1 · answered Nov 24 '15 at 22:20

0

try

<a ui-sref="welcome">Login</a>

instead of

<a href="/welcome">Login</a>

answered Nov 24 '15 at 22:20

Daniel

6,194
7
33
59

That gives a weird `Error: Could not resolve '/welcome' from state ''` in the console. – DemCodeLines Nov 24 '15 at 22:24

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

It turns out that $locationProvider was messing with the links. As stated here, there is a known issue with links and $locationProvider.

edited May 23 '17 at 11:51

Community

1
1

answered Nov 24 '15 at 22:29

DemCodeLines

1,870
8
41
60

Page only navigates when manually refreshing

2 Answers2