CODEWITHSUNDEEP
angularjs.htaccessurlmod-rewritengroute
Brian Emilius
Brian Emilius

Reputation: 729

angularjs ngroute and htaccess rewrite

I am wondering how to work angularjs ngRoute and htaccess rewrite together.

I have ngRoute working so I get URLs like these:

http://domain.com/#/something/somestring

But I would very much like this result:

http://domain.com/something/somestring

In other words, I'd like to get rid of /# in my URLs. I've done this before with .htaccess and mod_rewrite.c and PHP, but I have no clue how to achieve the same result with AngularJS. Any pointers, tutorial-links, articles, etc. that explains how this can be done, or simply an example would be greatly appreciated.

A few requirements: I should still be able to do my routing the same way I've done so far:

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, like :pagePermaLink should still be accessible from the scope:

blogCtrl.controller('pageCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    var foo = $routeParams.pagePermaLink;
    // ...
}]);

Upvotes: 0

Views: 680

Answers (1)

mofojed
mofojed

Reputation: 1393

If you've already done your rewrites, you should just be able to set $locationProvider.html5Mode(true). See https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

Also, similar stack overflow questions might be of assistance: Angular Direct Url without hash $location / switching between html5 and hashbang mode / link rewriting

Upvotes: 1

Related Questions