带有 html5mode 和路由的 asp.net mvc 托管 angular 应用程序 [英] asp.net mvc hosting angular app with html5mode and routing

问题描述

好的，所以我在 asp.net mvc 5 中托管了一个 angularjs，并在我的 angular 应用程序中使用 html5mode(true) 来删除 url 中的所有哈希符号.一切都很好，但是，我当前的设置如下所示:

RouteConfig.cs:

 routes.MapRoute(名称:默认"，网址:应用程序/{角度}"，默认值:new { controller = "Ng", action = "Index", angular= UrlParameter.Optional });

这样当我导航到 http://url/app/myangularroute 时，我的 Ng/Index 操作会返回包含ng-view 容器和 angular 应用程序现在处于活动状态并使用提供的路线

现在，我的问题是，当我导航到 http://url/app/ 时，它返回一个我无法理解的目录列表不允许错误.angular 参数设置为可选时，我的索引操作不应该返回吗?

我能否以某种方式完全避免应用程序"而仍然让我的 Angular 应用程序正常工作?我尝试了一些重写规则，但这给了我很多错误，因为我正在使用 mvc 捆绑和缩小功能.

我可以接受当前格式的 url，但无需提供可选参数，例如 http://url/app/

此外，它只是一个有角度的应用程序，除了 index.cshtml 包装器之外没有其他 mvc 视图.

这家伙似乎让它起作用了，但我看不到他的 mvc 路线

解决方案

尝试将其添加到您的 web.config sytem.webserver 设置中.

<modules runAllManagedModulesForAllRequests="true"/><system.webServer>

编辑:

尝试更改您的 RouteConfig.cs，如下所示:

 routes.MapRoute(名称:默认"，url: "app/{*.}",默认值:new { controller = "Ng", action = "Index" });

我完全忘记了这个问题，但现在我才意识到问题可能是您尚未将 IIS 服务器配置为使用 Html5Mode，请看一下:https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

具体来说这部分:

Azure IIS 重写:

<重写><规则><规则名称="主规则" stopProcessing="true"><match url=".*"/><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/></条件><action type="重写" url="/"/></规则></规则></rewrite></system.webServer>

我希望这会有所帮助.

Alright, so I am hosting an angularjs inside asp.net mvc 5 and are using the html5mode(true) in my angular app to get rid of all hash signs in the url. Everything works great, however, with my current setup that looks like this:

RouteConfig.cs:

        routes.MapRoute(
            name: "Default",
            url: "app/{angular}",
            defaults: new { controller = "Ng", action = "Index", angular= UrlParameter.Optional }
        );

So that when I navigate to http://url/app/myangularroute my Ng/Index action returns the view which contains the ng-view container and the angular app is now active and working with the route provided

Now, my problem here is, when I navigate to http://url/app/ it returns a dir listning not allowed error which I cannot understand. Shouldn't my index action be returned as the angular parameter is set to optional?

And can I somehow avoid the "app" completely and still get my angular app to work? I have tried some rewrite rules but that gives me alot of errors because I am making use of the mvc bundling and minification functionality.

I could live with the url being the format it currently is but without the need to provide the optional parameter, like http://url/app/

Also, it's only an angular app, no other mvc view than the index.cshtml wrapper.

This guy seems to get it to work, but I can't see his mvc routes

解决方案

Try adding this in your web.config sytem.webserver settings.

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
<system.webServer>

EDIT:

Try changing your RouteConfig.cs, like this:

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

EDIT2:

I had completely forgoten about this question, but now I just realized that maybe the problem is that you haven't configured your IIS Server to work with Html5Mode, have a look at this: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

Concretelly this part:

Azure IIS Rewrites:

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

I hope that this helps.

这篇关于带有 html5mode 和路由的 asp.net mvc 托管 angular 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！