Angular UI Router not matching URL path

Question

When I go to localhost:3000/login, I'm redirected to localhost:3000/login#/login. How is that happening? I'm using the 1.3 release of AngularJS if that matters.

 (function() {
  this.app.config([
'$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  
$urlRouterProvider.otherwise('/login');

$stateProvider.state('register', {
    url: '/register',
    templateUrl: '/components/user/register.html',
    controller: 'UserCtrl'
  }).state('login', {
    url: '/login',
    templateUrl: '/assets/components/auth/login.html',
    controller: 'AuthCtrl'
  });
}
  ]);

}).call(this);

Sorry - I don't follow what that means. A request is made to '/login' and the html is returned from that endpoint. — Michael, Oct 16 '14 at 20:51
I'm assuming your html is inside of the directory /login... which is why it is giving you the /login/#/login. — dannypaz, Oct 16 '14 at 20:57
What does it mean for HTML to be inside of a directory? A request is made to a certain endpoint and a block of HTML is returned. — Michael, Oct 16 '14 at 21:07

score 1 · Answer 1 · edited May 23 '17 at 12:11

The reason you are seeing localhost:3000/login#/login is because your $stateProvider configuration uses the .otherwise route which goes to #/login. The first /login is part of your URL path to the endpoint that retrieves the HTML for your Single Page Application (SPA) - it is part of your base URL.

For developers first starting out with SPAs, it might appear counter-intuitive that "navigation" in the app doesn't actually change the URL path - and thus endpoints of the server. Because of that there are no HTTP requests or HTTP-302 redirects. The app (or Angular, in this case) only changes the fragment (#) portion of the URL - that is how $stateProvider or $routeProvider "navigation" works.

So, the routes you configure in SPA determine "logically" which view to show. While the content of the view could load from an external URL, it is not related to the "route" definition itself.

Determine where your SPA will live. Determine what belongs to your SPA and what doesn't - and would be serviced by a different endpoint. Within SPA, "navigate" via #/path/to/view-style routes. Change url via $location.path to navigate outside of your SPA to a different endpoint.

== Same endpoint / different "routes" - all part of the same App:

baseurl.com/basePath#/about
baseurl.com/basePath#/login
baseurl.com/basePath#/product/153

== Different endpoints - different apps. Each one is an HTTP request to the server:

baseurl.com/basePath/about
baseurl.com/basePath/login
baseurl.com/basePath/product/153/

EDIT:

It is possible to use /page-view/other/params without #, turns out. Take a look at the following SO question.

In short, it's called HTML5 mode, and it can be configured with $locationProvider:

$locationProvider.html5Mode(true);

This however requires a bit more configuration and also more configuration on the server: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

So let's say I want someone to access the login page by going to localhost:3000/login. What should my routing code look like? Do I need to use urlRouterProvider instead of stateProvider? — Michael, Oct 16 '14 at 22:40
If you're doing a typical form authentication under `/login`, then it is outside of your app. You just HTTP-redirect to `/login` and upon successful authentication, redirect back to the app. — New Dev, Oct 16 '14 at 22:43
A Single Page App is just that - single page. So you don't actually change the endpoint. The entire app lives under one endpoint. — New Dev, Oct 16 '14 at 22:44
I'm not trying to do any authentication at this point. It could be any page, for example "about". I just want the about template to show if a user goes to /about. How can I do that with ui-router?? Right now it will redirect to /about#/login and show the login template. — Michael, Oct 16 '14 at 22:52
You can't do this from within an SPA (unless there is some hack that I'm not familiar with). SPAs don't actually redirect. They use the fragment (#) portion of the URL. To change the actual URL would involve an HTTP-redirect - which makes a round trip to the server, and thus, by definition, outside of the Angular domain. — New Dev, Oct 16 '14 at 22:56
Why is a redirect needed? You go to mydomain.com/page_name and it knows which template to show you based on the URL and routes file. — Michael, Oct 16 '14 at 23:19

Angular UI Router not matching URL path

1 Answers1