How can I seamlessly integrate AngularJS ngRoute and htaccess rewrite?
Currently, my ngRoute setup generates URLs like this:
http://domain.com/#/something/somestring
However, I would prefer cleaner URLs like:
http://domain.com/something/somestring
In essence, I want to remove the /# from my URLs. While I have accomplished similar URL restructuring in the past using .htaccess, mod_rewrite.c, and PHP, I'm unsure how to achieve the same outcome with AngularJS.
If anyone can provide guidance through tutorials, articles, examples or any resources on how to accomplish this, it would be greatly appreciated.
A few key criteria for achieving this: I need to maintain my current routing structure, specified as follows:
blogApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page/:pagePermaLink', {
templateUrl: './assets/templates/page.html',
controller: 'pageCtrl'
}).
when('/article', {
templateUrl: './assets/templates/article.html',
controller: 'articleCtrl'
}).
otherwise({
redirectTo: '/home',
templateUrl: './assets/templates/page.html',
controller: 'mainCtrl'
});
}]);
The URL query string, such as :pagePermaLink, must still be accessible from the scope:
blogCtrl.controller('pageCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
var foo = $routeParams.pagePermaLink;
// ...
}]);