AngularJS HTML5 nested routes

Question

Angular: 1.1.5

I go to: http://xxxxx.com/route1/route2/route3 and /route3 gets triggered instead of route1/route2/route3 Works fine with HTML5 mode off ... :(

Nginx config

location / {
    index index.html;
    try_files $uri $uri/ /index.html?$args;
}

My app config

$routeProvider.when('/route1/route2/route3', {
        templateUrl: '/views/home.html',
        controller: 'HomeCtrl'
    });

$routeProvider.when('/route3', {
        templateUrl: '/views/home.html',
        controller: 'HomeCtrl'
    });

$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);

$location Log:

$$protocol: "http", $$host: "xxxxxx"…}
$$absUrl: "http://xxxxxxx.com/route1/route2/route3"
$$hash: ""
$$host: "10.44.11.73"
$$path: "/route3"
$$port: 80
$$protocol: "http"
$$replace: false
$$url: "/route3"

How can I change my settings to make HTML5 urls working with nested routes?

Dan Kanze · Accepted Answer · 2013-06-17 19:18:22Z

3

For single page apps, this is all you need in your NGINX config:

server
{
    server_name example.com *.example.com;
    access_log /var/log/nginx/example.com.access.log;
    error_log /var/log/nginx/example.com.error.log;
    root /var/www/html/example;
    index index.html;
    location / {
       try_files $uri /index.html;
    }
}

answered Jun 17, 2013 at 19:18

Dan Kanze

18.6k28 gold badges85 silver badges136 bronze badges

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

2 Comments

Bartosz Dabrowski Over a year ago

This does not fix the problem... $$absUrl: "http://www.locahost/route1/route2/route3" $$path: "/route3" $$url: "/route3" path should be /route1/route2/route3

tytyryty Over a year ago

what is /var/www/html/example here? path to your web app?

Elnur Abdurrakhimov · Accepted Answer · 2014-06-25 00:06:50Z

3

Add

<base href="/">

to your index.html.

answered Jun 25, 2014 at 0:06

Elnur Abdurrakhimov

44.9k11 gold badges152 silver badges134 bronze badges

1 Comment

Stephen Ostermiller Over a year ago

That may help, but I'm not sure why. What would that have to do with html5?

Collectives™ on Stack Overflow

AngularJS HTML5 nested routes

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related