Question

我有angularjs和mvc4 app。为了使用disqus我启用了hashbang和html5Mode url。

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

我的应用程序的入口点是家庭控制器中的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',
  }
}

AngularJS MVC 4路由，html5 hashbang网址

1 个答案: