CODEWITHSUNDEEP
angularjsangular-ui-router
user7808967
user7808967

Reputation:

How can I remove #! from url in angularjs?

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

]);

Upvotes: 1

Views: 800

Answers (1)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

You can try and use:

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

Upvotes: 1

Related Questions