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
– Michael, Commented Oct 16, 2014 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
– dannypaz, Commented Oct 16, 2014 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
– Michael, Commented Oct 16, 2014 at 21:07

Community · Accepted Answer · 2017-05-23 12:11:42Z

1

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

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Oct 16, 2014 at 22:32

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michael Over a year ago

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?

New Dev Over a year ago

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 Over a year ago

A Single Page App is just that - single page. So you don't actually change the endpoint. The entire app lives under one endpoint.

Michael Over a year ago

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.

New Dev Over a year ago

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.

|

Collectives™ on Stack Overflow

Angular UI Router not matching URL path

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related