AngularJS MVC 4 routing, html5 hashbang urls

Question

I have angularjs and mvc4 app. For using disqus I enabled hashbang and html5Mode url.

With html5 mode, server side url rewriting needs to be fixed. otherwise a full page refresh leads to 404 error.

The entry point of my application is Index.chtml in home controller and it uses _layout.chtml (for bundling and minification.)

My webconfig route is :

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index"},
            namespaces: new[] { "Flashspark.Controllers" });

and my AngularJS config is:

(function () {
'use strict';

var app = angular.module('app');

// Collect the routes
app.constant('routes', getRoutes());

// Configure the routes and route resolvers
app.config(['$routeProvider', '$locationProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider,$locationProvider, routes) {

    routes.forEach(function (r) {
        $routeProvider.when(r.url, r.config);
        $locationProvider.html5Mode('true').hashPrefix('!');
    });
    $routeProvider.otherwise({ redirectTo: '/' });

}

// Define the routes 
function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'app/thoughts/thoughts.html',
                title: 'thoughts',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-book"></i> Thoughts'
                }
            }
        }, {
            url: '/faq',
            config: {
                title: 'faq',
                templateUrl: 'app/faq/faq.html',
                settings: {
                    nav: 2,
                    content: '<i class="fa fa-info"></i> FAQ'
                }
            }
        },
         {
             url: '/timeline',
             config: {
                 templateUrl: 'app/timeline/timeline.html',
                 title: 'timeline',
                 settings: {
                     nav: 3,
                     content: '<i class="fa fa-arrows-h"></i> Timeline'
                 }
             }
         },
          {
              url: '/about',
              config: {
                  templateUrl: 'app/about/about.html',
                  title: 'contact',
                  settings: {
                      nav: 4,
                      content: '<i class="fa fa-list fa-1x"></i> About'
                  }
              }
          },
          {
              url: '/thoughts/:article',
              config: {
                  templateUrl: 'app/article/article.html',
                  title: 'article',
              }
          }

    ];
}

=================================================================================

THE PROBLEM I AM HAVING:

With this configuration, All the routes which are only 1 deep work without any issues

like:

/faq  , /timeline

even after refresh, the url's are preserved.

However for URL's like:

/thoughts/:articleid (2 deep)

the styling for the whole app is stripped out when I refresh from this page.

i'm getting the same problem, did you find a solution for that ? — nam vo
sorry, no ideas yet..i am using 1 deep everywhere...its on my list to check but havent started it yet..:( — abhijitsinha89

Blake Bowen Blake Bowen · Accepted Answer · 2014-06-19T22:59:20

You need to have to a default route for thoughts

{
  url: '/thoughts',
  config: {
    templateUrl: 'app/article/article.html',
    title: 'article',
  }
}

AngularJS MVC 4 routing, html5 hashbang urls

1 Answers