How can I route pages using ui-router in angular js - angularjs

Question

How to avoid # symbol from the url in ui-router.Can I remove $urlRouterProvider.otherwise('/'); It redirecting all a href="#" to the index page.Please help.Thanks in advance
My code here.
routerApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', {
url: '/',
views: {
'headertop': {
templateUrl: 'partials/landingpageheader.html'
},
'main': {
templateUrl: 'partials/landingpage.html',
}
}
})
.state('home', {
url: '/home',
views: {
'headertop': {
templateUrl: 'partials/header_top.html',
controller: 'GoogleSearchCtrl'
},
'main': {
templateUrl: 'partials/homepage.html',
controller: 'HomePageCtrl'
}
}
})
.state('chefprofile', {
url: '/chefprofile/:chef&:itemdate',
views: {
'headertop': {
templateUrl: 'partials/header_top.html'
},
'main': {
templateUrl: 'partials/chefprofile.html',
controller: 'ChefCtrl'
}
}
})
.state('aboutus', {
url: '/aboutus',
views: {
'headertop': {
templateUrl: 'partials/header2.html'
},
'main': {
templateUrl: 'partials/about_us.html',
}
}
})
.state('register', {
url: '/register',
views: {
'headertop': {
templateUrl: 'partials/header3.html'
},
'main': {
templateUrl: 'partials/register.html',
}
}
})
.state('delivery', {
url: '/delivery_register',
views: {
'headertop': {
templateUrl: 'partials/header3.html'
},
'main': {
templateUrl: 'partials/dlvry_register.html',
}
}
})
.state('myaccount', {
url: '/myaccount',
views: {
'headertop': {
templateUrl: 'partials/header3.html'
},
'main': {
templateUrl: 'partials/my_account.html',
}
}
})
.state('faq', {
url: '/FAQ',
views: {
'headertop': {
templateUrl: 'partials/headerfaq.html'
},
'main': {
templateUrl: 'partials/faq.html',
}
}
});
});

Answer 1

You should be able to use HTML5 mode from the location provider.
app.config(["$locationProvider",
function($locationProvider) {
$locationProvider.html5Mode(true);
}]);

Answer 2

This happens when angular uses compatibility mode for routing. This helps routing in older browsers work, but comes with a price. Angular internally uses URL hashes to make changes in routes, and thus you can see this in the URL.
If you want to remove the hash, and if you are sure that your code will always run on HTML5 compatible browsers, you can use the method, as described by #IamYaman in the answer.
The HTML5 method uses the history push API to change the URL of your browser. That's why the page isn't refreshed.
Also, don't forget to set the base tag as <base href="/"> in the head section of your HTML. You can read more about it in this guide.

Answer 3

Try this
angular.module('yourapp', [
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
});