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
    • 921
    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.

     

    1. spaApp.config(function($routeProvider, $locationProvider) {
    2.     $routeProvider
    3.  
    4. // route for the home page
    5. .when('/', {
    6. templateUrl : 'pages/home.html',
    7. controller : 'mainController'
    8. })
    9.  
    10. // route for the about page
    11. .when('/about', {
    12. templateUrl : 'pages/about.html',
    13. controller : 'aboutController'
    14. })
    15.  
    16. // route for the contact page
    17. .when('/contact', {
    18. templateUrl : 'pages/contact.html',
    19. controller : 'contactController'
    20. });
    21.  
    22. $locationProvider.html5Mode(true);
    23. });

     

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

     

    1. <ul class="nav navbar-nav navbar-right">
    2. <li><a href=""><i class="fa fa-home"></i> Home</a></li>
    3. <li><a href="about"><i class="fa fa-shield"></i> About</a></li>
    4. <li><a href="contact"><i class="fa fa-comment"></i> Contact</a></li>
    5. </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.

     

    1. RewriteEngine On
    2. RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    3. RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    4. RewriteRule ^ - [L]
    5. 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
Reset Password
Fill out the form below and reset your password: