AngularJS, HTML5

AngularJS Routing : Part 2 – make # (Hash) invisible from URL in SPA

Before reading this Article , Please check out AngularJS Routing : Part 1 Create a Single Page Application (SPA) first .

Every AngularJS Dev likes the way that the routing of AngularJS works . It uses # (Hash) in the URL like below –

###

But Its not very readable for Public User , non Tech people , mass people of the world , so its better to make the # invisible from the URL . And Yes, Its real EASY !!!

First Set the Html5Mode to true in LocationProvider . Now the app.js file will be like :::

spaApp.config(function ($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $routeProvider.when("/", { templateUrl: "/partials/home.html" }).
                   when("/profile", { templateUrl: "/partials/profile.html" }).
                   when("/contact", { templateUrl: "/partials/contact.html" }).
                   otherwise({ redirectTo: '/' });

});

And my index.html code will be like below now :::

<tr>
                <td>
                    <a href="/">Home <i class="icon-arrow-down"></i></a>
                </td>
                <td>
                    <a href="/profile">Profile <i class="icon-arrow-down"></i></a>
                </td>
                <td>
                    <a href="/contact">Contact <i class="icon-arrow-down"></i></a>
                </td>
            </tr>

My SPA Site is now without that # …

#less

Standard