I already have done $locationProvider.html5Mode(true);
but it is not working. Whenever I access http://example.com
it goes to http://example.com/#!/
. Code is given here:
var myApp = angular.module('myApp', ['ui.router', 'ui.bootstrap']);
myApp.config(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
myApp.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
// For any unmatched url, redirect to EXTRANET home page
$urlRouterProvider.otherwise('/');
// Now set up the states
$stateProvider
.state('listrole', {
url: "/list-role",
views: {
'main-content': {
templateUrl: rootUrl+ 'views/main.html',
controller: 'rolesCtrl'
}
}
})
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
});
Update
I added $locationProvider.hashPrefix('');
as well but no difference. Also let me tell you that I am enter address in address bar and hitting enter. Am I doing right? how will browser find that it does not need to refresh from server?
Update #2
Ideally I want URL as http://example.com
and http://example.com/#!/list-role
to http://example.com/list-role
. Right now http://example.com/list-role
gives 404
Update #3
I am using nginx proxy, if that helps.
Update #4
Erased Cache. Now I can see http://example.com
instead of http://example.com/#!
but still http://example.com/list-role
gives 404
Below code will remove exclamatory (!) mark in URL
or else go to Routing issue with AngularJS project using yeoman setup
it worked for me
Add to your html file
<head> <base href="/foldername/"> </head>
and this one is for your app.js
$locationProvider.html5Mode(true);
this is for
.htaccess
create file you dont have.If you are in .NET stack with MVC with AngularJS, this is what you have to do to remove the '#' from url:
1.Set up your base href in your _Layout page:
2.Then, add following in your angular app config :
Add the following to app.js
If you want to remove this prefix, add this code to your config:
Source here for more information.
Update
If you want to remove the whole prefix (
#
and not only!
), you may try this solution:1) Activate the HTML5 mode and remove the prefix
!
in your module config2) And then set base to
/
in the<head>
on your index.htmlPlease check this question: AngularJS ui-router application has /#!/ in the URL