Configuring AngularJS HTML5 Routing

Question

I installed the local version of AngularJS using MAMP on my Mac. I turned on HTML5 mode with locationProvider so that URLs no longer contained in them.

To do this, although I added:

<base href="http://localhost:8888/AngularJS/app/">

to the top of the page index.html.

This makes it work ... BUT ONLY if the URL in the browser matches EXCELLENT (for example, the correct case and the right slash). Otherwise, it redirects you to the root root on localhost: 8888, but STILL shows the AngularJS application, so it changes the history of the client side, rather than redirecting the actual redirect.

It seems to me that I'm doing something wrong ... Is there a better way to make this work?

Answer 1

This will help if you can share the angular module configuration file to find out exactly how your route is configured.

I would recommend making your base tag relative to the domain, which makes it safe and deployment safe for new environements <base href="/AngularJS/app/">

The server must be configured to gracefully handle routes that fall off the desired path. Meaning, if you refer to http://localhost:8888/AngularJS/ZZZ, it should probably redirect to page 404 Page not found (after all, this is a bad route, correct it?).

, angular HTML5, URL-, , /AngularJS/app/, , Angular.

, HTML5, /AngularJS/app/login /AngularJS/app/page/1, /AngularJS/app/page/1 , /AngularJS/app/#/page/1, angular HTML5 ( , Angular).

HTML5, [] angular, , , , HTML5.

, , , .htaccess (, ).

Answer 2

:

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <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>
</VirtualHost>