Arip Rahman Arip Rahman - 1 year ago 327
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){

url: '/locale',
templateUrl: 'template/static/locale.html'

url: '/callback',
templateUrl: 'template/static/callback.html',
controller: 'userCalendar'

url: '/sign_in',
templateUrl: 'template/users/sign_in.html'

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

url: '/tabs',
templateUrl: 'template/pages/tabs.html'

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

url: '#/form',
templateUrl: '/template/users/form.html'
enabled: true,
requireBase: true

Thanks for your attention

Answer Source

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">
<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]

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download