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
If you want to remove this prefix, add this code to your config:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
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 config
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');
2) And then set base to /
in the <head>
on your index.html
<head>
...
<base href="/">
</head>
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:
<head> <base href="/"> </head>
2.Then, add following in your angular app config :
$locationProvider.html5Mode(true)
$locationProvider.hashPrefix("!");
Below code will remove exclamatory (!) mark in URL
$locationProvider.hashPrefix('');
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.
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /foldername/
Add the following to app.js
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
$locationProvider.hashPrefix('');
Please check this question: AngularJS ui-router application has /#!/ in the URL