Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Remove hash from URL angularjs single page application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 876
    Comment on it

    Hello Programmers,

     

    By default AngularJS places hash (#) in URL when we build a single page application using it. There is some circumstances when hash creates problem. Search Engines like Google couldn't parse and read content from the URL with hash tag inside URL. Hash creates problem in SEO. And I'm sure nobody would like this. So if you wish to eliminate hash tag from your URL, follow the steps below - 

     

    1. Inject $locationProvider in your config method and enable HTML5 mode.

     

    spaApp.config(function($routeProvider, $locationProvider) {
    	$routeProvider
    
                // route for the home page
                .when('/', {
                    templateUrl : 'pages/home.html',
                    controller  : 'mainController'
                })
    
                // route for the about page
                .when('/about', {
                    templateUrl : 'pages/about.html',
                    controller  : 'aboutController'
                })
    
                // route for the contact page
                .when('/contact', {
                    templateUrl : 'pages/contact.html',
                    controller  : 'contactController'
                });
    
        $locationProvider.html5Mode(true);
    });

     

    2. Remove hash tag from your links in your pages if any.

     

    <ul class="nav navbar-nav navbar-right">
        <li><a href=""><i class="fa fa-home"></i> Home</a></li>
        <li><a href="about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="contact"><i class="fa fa-comment"></i> Contact</a></li>
    </ul>

     

    3. Tell your webserver to forward all request to your AngularJS app. My app runs over apache2 and I've added the following config to my 000-default.conf file in /etc/apache2/site-available directory.

     

    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    RewriteRule ^ /spa/

     

    Here spa is the name of my AngularJs app. Refresh your application and you will find that hash tag has been removed.

     

    Thanks.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: