server-side changes for $locationProvider.html5Mode(true);

Question

server code:

app.get('/', function(req, res){
    console.log('executed "/"')
     res.render('home');
});

app.get('/partials/:name', function (req, res) {
    console.log('executed partials:name');
    var name = req.params.name;
    console.log(name);
    res.render('partials/' + name);
});

the code works perfectly before i put $locationProvider.html5Mode(true); to convert '/#/' url into regular / url.

After which, the console.log('executed partials:name'); fails to execute. Documentation says:-

Server side
Using this mode requires URL rewriting on server side, basically you have to rewrite all 
your links to entry point of your application (e.g. index.html)

The changes I have tried are not working. What are changes to be made?

Edit: The following is the angular code:

var myApp = angular.module('myApp', []);

myApp.config(['$routeProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
      when('/', {
        templateUrl: 'partials/partial',
        controller: 'homePage'
      }).      
      otherwise({redirectTo: '/login'});
    $locationProvider.html5Mode(true);
}]);

I again mention, the routing works perfectly well, till i add $locationProvider.html5Mode(true); to angular.

score 0 · Answer 1 · answered Oct 04 '13 at 08:41

Not quite sure if this matches your problem but when we did this we needed to create a few rules on the server(in Nginx with our setup) to make sure a link to /page didn't just return 404 because it didn't exist on the server.

First we needed to make sure that a link to an Angular route was treated as such. So we do a rewrite ourdomain.com/page to ourdomain.com/#/page. /page doesn't exist on the server, only in Angular, so it would return 404. It needs to go to the index so that Angular can handle the route (this is relevant from incoming links, not so much for when you are on the site since then Angular handles the links anyway).

Secondly we needed to make an exceptions for partials, since those actually actually exists on the server and are not Angular routes. So going to ourdomain.com/partials/partial actually needs to find the partial on the server and can't be rewritten by the above rule.

Hope that helps somewhat at least.

thanks for the answer. I'm just routing for ourdomain.com which uses ng-view to link to a partials/partial. the routing works perfectly well till i add '$locationProvider.html5Mode(true);' in angular. After which the routing stops working. Added the angularjs code if it helps clarify the problem — Sangram Singh, Oct 04 '13 at 08:48

score 0 · Accepted Answer · answered Oct 04 '13 at 09:04

Error is not with routing in this case. myApp.config(['$routeProvider', function($routeProvider, $locationProvider) is defined wrongly.

it should include $locationProvider thus :-

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider,
 $locationProvider) {

works perfectly.

server-side changes for $locationProvider.html5Mode(true);

2 Answers2