AngularJS Dynamic Routes Without Hashtag

I am building an application using Angular and not sure how to handle dynamically created urls that do not contain the #. I have tried the html5Mode true but that doesn't work bec

Solution 1:

If you arrive at one of those routes from within your app it will work fine, but if you copy and paste that into your browser address bar you'll get a 404 because the server does not understand how to route to those addresses, for example if you try to go to domain.com/john you will get an error because the server is going to look for a john.html page which most likely wont be there. What you could do is configure your server to return to your base page home.html for requests without the # and then angular will handle forwarding you to that route from there.

See the docs on HTML5 routing.

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)

Another alternative (worse approach compared to server side url rewriting) is to give fully qualified addresses to your resorces in your rout config with respect to the root of the server, for example

var myRoutingApp = angular.module('routingApp', ['ngResource', 'ngRoute', 'kendo.directives', 'ngGrid'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/', { templateUrl: '../Angular/AngularSeed/app/templates/Home.html', controller: '../Angular/AngularSeed/app/controllers/HomeController' });
        $routeProvider.when('/Companies', { templateUrl: '../Angular/AngularSeed/app/templates/Page1.html', controller: '../Angular/AngularSeed/app/controllers/Page1Controller' });
        $routeProvider.when('/CreateCompany', { templateUrl: '../Angular/AngularSeed/app/templates/Page2.html', controller: '../Angular/AngularSeed/app/controllers/Page2Controller' }); ......
        $locationProvider.html5Mode(true);

        $routeProvider.otherwise({ redirectTo: '/' });
    });

That works, but is clearly not ideal.