how to change hash to slash in Angularjs

Question

  <script type="text/javascript">

angular.module('ngView', ['ngRoute'],
    function($routeProvider){
      $routeProvider.when('/test',
        {
          template: '{{}}',
          controller: function(){
            console.log('controller');
            $('div').first().html('<b>OK</b>');
          }
        }
      );
    }
  );
  </script>

This is all my angular code. In URL, i can access test by

file:///Users/tom/Documents/Projects/a4/index2.html#/test
file:///Users/tom/Documents/Projects/a4/index2.html#test

Both of the above two ways work.

But when I change #/test to /test, it doesn't work.

How do I configure Angularjs to only use '/' in URL path?

You need to enable HTML5 model in config state `$locationProvider.html5Mode(true)`. Please see the guide here https://docs.angularjs.org/guide/$location — Chandermani, Apr 18 '14 at 08:57
See here: http://stackoverflow.com/questions/14319967/angularjs-routing-without-the-hash — tsturzl, Apr 18 '14 at 08:59
Thanks! I checked this HTML5 question before asking this question, but didn't think it is related to my situation. — Nicolas S.Xu, Apr 18 '14 at 09:30

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

I see that you are working locally, you need a server to work with html5Mode, after enabling it you need to define an .htaccess or a virtual host on the server take a look at this question AngularJS: can't get html5 mode urls with ui-route $state

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

edited May 23 '17 at 12:05

Community

1
1

answered Apr 18 '14 at 12:17

Issam Zoli

2,724
1
21
35

I am using nodejs, and I didn't find any .htaccess in the project folder. Does this solution still apply to nodejs? HTML5 is a browser side technology, why do i need to configure server? – Nicolas S.Xu Apr 20 '14 at 07:08
I put the project files on a local nodejs server running express4 MVC framework. Here is the access URL: http://localhost:3000/a4/test . It still won't work. (no .htaccess file) If you are familar with nodejs server, can you please tell me what I missed? Thanks! – Nicolas S.Xu Apr 20 '14 at 07:52
Unfortunately, I never had any experience with nodejs advanced configurations but maybe you could use something from these questions http://stackoverflow.com/questions/17199095/nodejs-equivalent-of-this-htaccess http://stackoverflow.com/questions/17777967/using-angularjs-html5mode-with-nodejs-and-express http://stackoverflow.com/questions/13222252/how-to-use-angularjs-routes-with-express-node-js-when-a-new-page-is-requested – Issam Zoli Apr 20 '14 at 11:55

how to change hash to slash in Angularjs

1 Answers1