AngularJs UI-路由器 - $ stateProvider不能看我的抽象状态(Angul

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

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

在我的角度项目中，我有两个途径，一个抽象的。

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公共静态无效的RegisterRoutes（RouteCollection路线）{routes.MapRoute（名称：“物品”，网址：“应用程序/篇”，默认值为：新{控制器=“家”，行动=“索引”} ）;

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

当我从根本上航行的一切工作正常。但是，当我将点击刷新按钮没有加载抽象状态。请帮助我如何解决这个问题。

谢谢

Answer 1:

我解决了这个问题。

我的索引文件是在解决方案的根。取而代之的是我删除index.html文件和创建MVC视图查看 - >首页 - > 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 }
                            );
        }

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

波格丹

Answer 2:

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

1）提供<base href="或
2）通过不同的设置成$locationProvider.html5Mode(setting)模式。

我创建工作plunker ，其头中具有此特殊行：

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

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

点击此处查看： $ locationProvider

PARAM：模式类型：（可选）booleanObject
如果布尔，套html5Mode.enabled价值。
如果启用对象，设置，requireBase和rewriteLinks到相应的值。支持的属性：
- 启用 - {}布尔- （默认：false）如果为真，将依靠history.pushState以变更网址，在那里的支持。将回落到哈希前缀的路径中不支持pushState的浏览器。 - requireBase - {布尔} - （默认值：真）当html5Mode被启用，指定标签是否被需要存在。如果启用，requireBase是真实的，并且基本标记不存在，当$位置注入错误将被抛出。更多信息请参见该$位置指南- rewriteLinks - {}布尔- （默认值：true）当html5Mode启用，启用/禁用URL重写为相对链接。

文章来源: AngularJs UI-Router - $stateProvider can't read my abstract state