how to implement custom routes in angular.js?

Question

I've got a route:

.state('home.blog', {
  url: "/blog",
  templateUrl: "blog.html",
  controller: "BlogController"
})

And my route is localhost:3000/home/blog I would like to change it to localhost:3000/blog. I searched the Internet but I have not found any simple solution.

Answer 1

This is because the url part is dervied from parent. But we can explicitly set, that parent should not be used by '^':

.state('home.blog', {
  url: "^/blog",
  templateUrl: "blog.html",
  controller: "BlogController"
})

See the doc

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });