Change url and reload page in angularjs - angularjs

Question

I would like after getting credentials from another website, to change the url in my angularJS application.
I am setting my app like this
angular.module('demoApp', [])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/example', {
templateUrl: 'views/example.html',
controller: 'ExampleCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
})
In my MainCtrl controller I change url like this :
$location.url($location.path()); // to remove url query params
$location.path('/example'); // to change the url
But this cause Cannot GET /example when I refresh the page.
Is there a solution for this ?
Thanks for your help.

Answer 1

It seams you didn"t handle URL rewriting needed when you activate the HTML5 mode (actually, the /example url doesn't exists, right now the only angular existing url is index.html)
So you'll have to handle URL rewriting server side.. For example for apache in a .htaccess file :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule !\.\w+$ index.html [L]
</IfModule>
Or if you're using grunt-connect :
connect: {
dev: {
options: {
port: 9002,
hostname: '*',
middleware: function(connect) {
return [
//modRewrite is used to handle properly angularjs' html5 mode
modRewrite(['^[^\\.]*$ /index.html [L]']),
lrSnippet,
folderMount(connect, '/app')
];
}
}
}
}
One more thing, be carefull, you're doing a double location change. If you want to remove query params, I sugest you to do this :
$location.path(url);
// clear any query params
$location.$$search = {};
$location.$$compose();