AngularJS MVC 4 路由，html5 hashbang url

Question

我有 angularjs 和 mvc4 应用程序。为了使用 disqus，我启用了 hashbang 和 html5Mode url。

使用 html5 模式，需要修复服务器端 url 重写。否则全页刷新会导致 404 错误。

我的应用程序的入口点是 Home 控制器中的 Index.chtml，它使用 _layout.chtml（用于捆绑和缩小。）

我的 webconfig 路线是：

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

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

我的 AngularJS 配置是：

(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',
              }
          }

    ];
}

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

我遇到的问题：

使用此配置，所有只有 1 个深度的路由都可以正常工作

喜欢：

/faq  , /timeline

即使在刷新后，网址也会保留。

但是对于 URL 之类的：

/thoughts/:articleid (2 deep)

当我从这个页面刷新时，整个应用的样式被去掉了。

Answer 1

你需要为thoughts设置一个默认路由

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