Nested state URL is incorrect with angular-ui-router

Question

My routes look like

$stateProvider.state("k8math", {
  abstract: true,
  url: "/k8math",
  templateUrl: "/views/k8math.html"
}).state("k8math.questions", {
  url: "questions",
  templateUrl: "/views/k8math/questions.html"
});

When I have a link like: <li ng-hide="showLogin"><a ui-sref="k8math.questions">K-8 Math</a></li> it goes to http://localhost:3000/k8mathquestions instead of http://localhost:3000/k8math/questions.

Answer 1

You forgot a leading slash in your url :

.state("k8math.questions", {
  url: "/questions",
  templateUrl: "/views/k8math/questions.html"
});

The url of nested states are relatives, but doesn't include the leading slash (example in docs)