remove # symbol from URL in Angular JS

Question

I am beginner in AngularJS and i am trying to remove # symbol from URL and i am using Visual Studio code IDE ,I did below steps for remove # from URL and when i launch Application with HTTP Live server its working and # removed from URL but when i reload page i am getting 404 can some one suggest me please

app.js

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function ($stateProvider,$locationProvider,$urlRouterProvider) {

    $urlRouterProvider.otherwise('/employeeList');

    $stateProvider

        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html'
        })
       .state('employeeList', {
            url: '/employeeList',
            templateUrl: 'templates/list_of_employees.html',
            controller: 'EmployeeController'
        })
        $locationProvider.html5Mode(true).hashPrefix('')

});

index.html

<head>
  <base href='/'>
</head>

Check this https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol — Ahmed Ghoniem, Dec 25 '18 at 06:16
remove .hashPrefix('') Just keep $locationProvider.html5Mode(true); — subodhkalika, Dec 25 '18 at 06:52
I am using vs code I think we have to set something in web.config file but in vs code there is no web.config file — AbhiRam, Dec 25 '18 at 06:54
its not related to vs code. VS code is just a code editor like notepad. web.config is for .net projects — subodhkalika, Dec 25 '18 at 07:03

score 0 · Answer 1 · answered Dec 25 '18 at 07:00

0

Using this $locationProvider.html5Mode(true) requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html).

Assuming you are using Apache and your index file is index.php or index.html , try adding the following to your .htaccess file to create a rewrite rule.

   <IfModule mod_rewrite.c> 
      RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f 
      RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*) /index.php/#/$1 
   </IfModule>

answered Dec 25 '18 at 07:00

subodhkalika

1,964
1
9
15

Where should I use this code? – AbhiRam Dec 25 '18 at 07:02
you need to create a .htaccess file in your project folder – subodhkalika Dec 25 '18 at 07:06
How can I create ? – AbhiRam Dec 25 '18 at 07:09
can we create this in vsCode? – AbhiRam Dec 25 '18 at 07:09
create a new file with file named .htaccess – subodhkalika Dec 25 '18 at 07:13
ok let me try and tell result – AbhiRam Dec 25 '18 at 07:14
can you connect to my system? – AbhiRam Dec 25 '18 at 07:15
please show me the way once – AbhiRam Dec 25 '18 at 07:15

remove # symbol from URL in Angular JS

app.js

index.html

1 Answers1