删除＃！ 从angular.js在ASP.Net Web API中显示

Question

因此，我试图删除＃！ 在我的有角网站并过渡到html5。 我看过其他指南，并使用locationProvider和索引文件中的base实施了它们。 当您通过ng-href将其定向到链接时，该站点工作正常，但是当我按刷新/直接输入URL时，出现404错误。 我读到的这与服务器端有关，因为.otherwise（）是hashbang函数，因此服务器端不知道在命中404时要路由到哪里。

话虽如此，我查看了WebApi的配置，发现如果已经命中了404，则我已经指示了默认的routeTemplate，如下所示。

// Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();
        jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

任何帮助，将不胜感激

Answer 1

正如您正确提到的那样，问题出在服务器端。 刷新浏览器时，不会启动AngularJS路由。相反，浏览器向服务器发出请求。 服务器在所需位置找不到任何内容，因此返回404。

您在问题中发布的当前服务器端路由仅处理对Web api的请求。

除了Web api路由之外，您还必须添加一个可传递起始页面的mvc路由。

假设您的起始页是index.html，请将以下路由添加到服务器端路由配置中

//MVC
RouteTable.Routes.Ignore("api/{*url}"); // ignore api routes for mvc
RouteTable.Routes.MapPageRoute("NonAPIRoute", "{*url}", "~/index.html");

如果您已经有MVC路由（例如，在App_Start文件夹中的RouteConfig类中），那么RouteConfig类应类似于此

using System.Web.Mvc;
using System.Web.Routing;

namespace WebApplication1
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("api/{*pathInfo}"); // ignore api routes 
            routes.MapPageRoute("NonAPIRoute", "{*url}", "~/index.html");
        }
    }
}

Answer 2

将配置添加到项目中以启用HTML5模式并删除前缀

.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix(''); // by default '!'
     $locationProvider.html5Mode({
         enabled: true
     });
}]);