EugeneTruly/ng-route-it

Takes server routes and converts them into angular.js routes. Useful for single page apps whose server routes don't understand angular's local routes.

The problem: You have a single page app routed via angular.js and you have html5Mode turned on. Like so

  $locationProvider
    .html5Mode( true );

  $routeProvider
    .when('/', {templateUrl: 'partials/1.html', controller: 'MainCtrl'})
    .when('/people/:team/:id', {templateUrl: 'partials/partial1.html', controller: 'PersonCtrl'})
    .otherwise({redirectTo: '/'});  

But you're serving that app using express (or a similar framework). You're server only knows about your one route at '/'.

Angular knows /people/:team/:id sends you to a person's profile but if a user hits that URL via the browser URL naviagtion (or external link) your server throws a 404.

Just listen for your angular.js routes on the server and convert them using ng-route-it.

  var ngRoute = require( 'ng-route-it' );

  app.get('/people/:team/:id', function(req, res) {
    var actualPath = ngRoute.routeIt( req );
    res.redirect( actualPath );
  });

You can use paths with static html at the root followed by your angular path

  var routeIt = require( 'ng-route-it' );

  app.get('/index.html/:team/:id', function(req, res) {
    var actualPath = ngRoute.routeIt( req );
    res.redirect( actualPath );
  });

Using a prefix hash? No problem

  // angular code
  $locationProvider
    .html5Mode( true )
    .hashPrefix( '!' );

  // in your server code

  var routeIt = require( 'ng-route-it' );

  app.get('/index.html/:team/:id', function(req, res) {
    var actualPath;
    actualPath = 
      ngRoute
        .setPrefixHash( '!' )
        .routeIt( req );
    res.redirect( actualPath );
  });

To run tests

  grunt

That's it. Simple. More features coming soon...