Issue on angularJs $locationProvider.html5Mode(true);

Question

I am learning AngularJs myself. Right now I am stuck on $locationProvider.html5Mode(true);.

On app.js file I have used this code.

angular.module('ContactsApp', ['ngRoute'])
        .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
                $routeProvider
                        .when('/contacts', {
                            controller: 'ListController',
                            templateUrl: 'views/list.html'
                        })

                $locationProvider.html5Mode(true);

            }]);

On my window computer I have created virtual host using this code.

<VirtualHost *:80>
    ServerName contacts.local
    ServerAlias contacts.local
    ServerAdmin webmaster@localhost
    DocumentRoot D:/xampp/htdocs/angularJs/contacts/public
    DirectoryIndex index.php index.html index.htm
    <Directory "D:/xampp/htdocs/angularJs/contacts/public">
                Order allow,deny
                Allow from all
                Require all granted
    </Directory>
</VirtualHost>

Now issue is that when I try to open http://contacts.local/#/contacts that redirects to http://contacts.local/contacts. That is working fine.

But If I try to open http://contacts.local/contacts It shows me error 500 Internal Server Error.

Please guide me where I have doing wrong. Thanks in advance.

Tui Popenoe · Accepted Answer · 2015-02-17 17:09:57Z

1

AngularJS $locationProvider.html5mode(true) requires a server side rewrite to the root url to allow state links. You are trying to access a route directly, so none of the angular framework is being used, hence the 500 error.

Any route that does not match a configured route should be rewritten to hit your root url (i.e. index.html).

For example, you are using Apache, so to rewrite requests, you can use:

<Directory /path/to/app>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
</Directory>

See the FAQ https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

edited Feb 17, 2015 at 17:09

answered Feb 17, 2015 at 17:04

Tui Popenoe

2,1242 gold badges23 silver badges45 bronze badges

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

Comments

karaxuna · Accepted Answer · 2015-02-17 17:10:59Z

0

You shall write route on server so that every request that does not match all other routes shall return your basic view (index.html for example). Rest routing will be done by angular. Detailed explanation:

When going to route http://contacts.local/#/contacts it is CHANGED to http://contacts.local/contacts without interacting with server, with html5 history api

When going directly to http://contacts.local/contacts, request has been made to server route /contacts that is not found

edited Feb 17, 2015 at 17:10

answered Feb 17, 2015 at 17:05

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Collectives™ on Stack Overflow

Issue on angularJs $locationProvider.html5Mode(true);

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related