Arip Rahman Arip Rahman - 5 months ago 147
AngularJS Question

remove hashtag in url, make error when refresh f5 (angularJs-cordova)

i have some question about router in angularJs. i used angular-ui-router. but i get error when removed hashtag(#) in url with $locationProvider. how to fix this problem?, in my module:



.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider

.state('locale',{
url: '/locale',
templateUrl: 'template/static/locale.html'
})

.state('callback',{
url: '/callback',
templateUrl: 'template/static/callback.html',
controller: 'userCalendar'
})

.state('sign_in',{
url: '/sign_in',
templateUrl: 'template/users/sign_in.html'
})

.state('addprofile', {
url: '/addprofile',
templateUrl: 'template/users/addprofile.html'
})

.state('tabs',{
url: '/tabs',
templateUrl: 'template/pages/tabs.html'
})

.state('tabs.mainMenu', {
url: '/mainMenu',
templateUrl: 'template/pages/mainmenu.html'
})

.state('form',{
url: '#/form',
templateUrl: '/template/users/form.html'
})
$urlRouterProvider.otherwise('locale');
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
});





Thanks for your attention

Answer

Once you remove the hash routing you will get this Refresh problem (even without Cordova). I see you already have $locationProvider setup with requireBase in your app.js config:

$locationProvider.html5Mode({enabled: true, requireBase: true});

That means you will also need to set the base URL in your index.html:

<html ng-app="myApp">
<head>
<title>AngularJS</title>
<base href="http://localhost:8888/angularjs-website-folder/">

You will also need to config your server url rewrite rules. Here's a solution for MAMP localhost using an .htaccess file in website folder:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /angularjs-website-folder/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

NB: The first RewriteBase should be a relative link whereas the base url in the index.html will be absolute.