How can I remove #! from url in angularjs?

Question

I want to remove #! from url and I used

$locationProvider.html5Mode(true);

For this and it works but when I refreshes the page it can't be able to find the page and give error.

what should I do for this?

Index.html

<!DOCTYPE html>
<html dir="ltr" lang="en" ng-app="myapp">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <base href="/">
</head>

    <body class="product-product-82 responsive full default layout_2">

    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
   <script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/config.js"></script>
<script type="text/javascript" src="controllers/productCtrl.js"></script>
<script type="text/javascript" src="controllers/menuCtrl.js"></script>
    <page-loader flag="isLoading"></page-loader>
    <div ui-view="layout"></div>

</body>

</html>

config file for routing

var app = angular.module('myapp');

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('productpagelayout', {
            abstract: true,
            views: {
                layout: {
                    templateUrl: 'template/layout/productpagelayout .html',
                },
                controller : 'productCtrl'
            }
        })
        .state('landing', {
            url: '/',
            templateUrl: 'template/landing/mainpages.html',
            controller: 'menuCtrl',
            parent: 'productpagelayout',
        })
        .state('home', {
            url: '/home',
            templateUrl: 'template/landing/landing.html',
            controller: 'menuCtrl',
            parent: 'productpagelayout',
        })
        .state('category2',{
            url: '/c/:name1/:name2',
            templateUrl: 'template/product/productsgridpage.html',
            controller: 'productCtrl',
            parent: 'productpagelayout'
        })
     $locationProvider.html5Mode(true);
}])

app.js

var app = angular.module('myapp', ['ui.router', 
  'rzModule', 
  'ngCookies', 
  'ui.bootstrap', 
  'ngSanitize',

]);

I think you can not remove #! from url because it is default url pattern in angular js. Hence on page refresh it's giving you an error. — Nikita
– Nikita, Commented Aug 23, 2017 at 13:18
Possible duplicate of Removing the fragment identifier from AngularJS urls (# symbol) — Óscar Andreu
– Óscar Andreu, Commented Aug 23, 2017 at 13:18
Please atleast read my question I removed #! from url but on refreshing it gives error, Do any one have solution for this — user7808967
– user7808967, Commented Aug 23, 2017 at 14:11

Aleksey Solovey · Accepted Answer · 2017-08-23 14:06:57Z

1

You can try and use:

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

answered Aug 23, 2017 at 14:06

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user7808967 Over a year ago

I had used it but the problem is that when I refreshes the page it doesnot go on that page and gives error

Collectives™ on Stack Overflow

How can I remove #! from url in angularjs?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related