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

19 thoughts on “AngularJS Routing : Part 2 – make # (Hash) invisible from URL in SPA”

  1. Pingback: AngularJS Routing : Part 1 – Create a Single Page Application (SPA) | Shahjada Talukdar MasooM

  2. miraz235 says:

    The Code
    $locationProvider.html5Mode(true);
    is enable HTML5 History push method. So we can see the pages change without refresh. But there has a problem with IIS server. When we directly hit on a specific page like http://yoursite.dom/profile then the Server first see the specific url but it will show you 404 error. because the route url defination we defined only in js on client side not in server. So for SPA, server needs to point every url to main index page on load. So there should be a url rewrite machanism in server. In Apache server we can do this by htaccess.

    After Page rewrite http://yoursite.dom/*anypage* will point to http://yoursite.dom/index.html and the the specific page *anypage* will load by client side angular router.

    Reply
  3. Abhijit Sinha says:

    Hi, how can I do url rewriting for asp.net mvc. Entry point for my application is Index.chtml in Home Controller. Then on the top of that I am using AngularJS structure, using hot towel angular.

    Reply 
    •  
 
var myApp = angular.module('myApp', ['ui.router']);
 
myApp.config(function ($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/state1");
    //
    // Now set up the states
    $stateProvider
      .state('state1', {
          url: "/state1",
          templateUrl: "partials/state1.html"
      })
      .state('state1.list', {
          url: "/list",
          templateUrl: "partials/state1.list.html",
          controller: function ($scope) {
              $scope.items = ["A", "List", "Of", "Items"];
          }
      })
      .state('state2', {
          url: "/state2",
          templateUrl: "partials/state2.html"
      })
      .state('state2.list', {
          url: "/list",
          templateUrl: "partials/state2.list.html",
          controller: function ($scope) {
              $scope.things = ["A", "Set", "Of", "Things"];
          }
      });
});
      Reply

  10. How to remove # from URL when project is in TOMCAT SERVER.
    We have achieved it in apache server with rewriteURL.
    Plzzzz help me with tomcat server.

    Reply

Leave a reply to miraz235 Cancel reply