AngularJs UI-Router - $stateProvider 无法读取我的抽象状态答案

【问题标题】：AngularJs UI-Router - $stateProvider can't read my abstract stateAngularJs UI-Router - $stateProvider 无法读取我的抽象状态
【发布时间】：2014-11-27 11:45:21
【问题描述】：

我对 html5Mode 有疑问。在我的 MVC 项目中，我只有一个控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return this.File("index.html", "text/html");
    }
}

在我的 Angular 项目中，我有两条路线和一条摘要。

angular.module('app').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/articles');

    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/blocks/layout.html",
            controller: 'AppCtrl'

        })
        .state('app.articles', {
            url: "/articles",
            templateUrl: 'templates/articles.html',
            controller: 'ArticlesCtrl'
        })
        .state('app.one-article', {
            url: "/articles/:articleId",
            templateUrl: 'templates/one-article.html',
            controller: 'OneArticleCtrl'
        });

    // use the HTML5 History API
    $locationProvider.html5Mode(true).hashPrefix('!');   
});

这是RouteConfig.cs

public static void RegisterRoutes(RouteCollection routes)
{

    routes.MapRoute(
         name: "articles",
         url: "app/articles",
         defaults: new { controller = "Home", action = "Index" });

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

}

当我从根目录导航时，一切正常。但是当我点击刷新按钮时，抽象状态是没有加载的。请帮我解决这个问题。

谢谢

【问题讨论】：

标签： asp.net-mvc angularjs angular-ui-router

【解决方案1】：

我解决了这个问题。

我的索引文件位于解决方案的根目录中。相反，我删除了那个 index.html 文件并创建了 MVC 视图 Views -> Home -> Index.cshtml。所有 HTML 都与 index.html 中的相同。

现在在我正在使用的控制器中

 public ActionResult Index()
    {
        return this.View();
    }

而不是这个：

        public ActionResult Index()
        {
             return this.File("index.html", "text/html"); 
        }

这是我的 RouteConfig.cs

  public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                         name: "AngularCatchAllRoute",
                         url: "{*any}",
                         defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
                            );
        }

希望有人会发现这篇文章有用。

波格丹

【讨论】：

【解决方案2】：

使用最新的角度和$locationProvider.html5Mode() 设置，我们必须选择，要么

1) 提供 <base href=" 或
2) 将不同的设置传递给 $locationProvider.html5Mode(setting) 模式。

我创建了working plunker，它在标题中有这样的特殊行：

<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <title>My App</title>
    <script>
      document.write('<base href="'+ document.location.pathname +'" />')
    </script>
  </head>

在这里查看：$locationProvider

参数：模式 类型：（可选）booleanObject

如果是布尔值，则将 html5Mode.enabled 设置为值。

如果是对象，则将启用、requireBase 和 rewriteLinks 设置为相应的值。支持的属性：
-- enabled - {boolean} -（默认值：false）如果为 true，将依赖 history.pushState 更改支持的 url。将回退到不支持 pushState 的浏览器中的哈希前缀路径。 -- requireBase - {boolean} -（默认值：true）启用 html5Mode 时，指定是否需要存在标签。如果 enabled 且 requireBase 为 true，并且不存在 base 标记，则在注入 $location 时将引发错误。有关更多信息，请参阅 $location 指南 -- rewriteLinks - {boolean} -（默认值：true）启用 html5Mode 时，启用/禁用相关链接的 url 重写。

【讨论】：

感谢您的快速回复。在我将更改为后，我有一个空页面角度误差太多。也许问题出在我的 IIS 配置中？
服务器设置有一些基本细节：How to: Configure your server to work with html5Mode顺便说一句，我使用了document.write，因为在plunker上它是必须的，url正在改变。在你的情况下，它可能是base="/"...测试它，玩... plunker 应该帮助比较
Radim 再次感谢您。我的服务器已配置，我更改为 base="/" 并再次出现同样的问题。这是一个非常奇怪的行为。当角度重定向我一切正常，当我手动去想要的链接布局被破坏并且所有脚本和 css 都没有加载。
很难在 plunker 上模拟这个解决方案。请写信给我 b.nicovski@yahoo.com。我将在我的项目中展示。谢谢
修改了帖子以便更好地理解。