删除#!来自 angular.js ASP.Net Web API 中的网址
Removing #! from angular.js Urls in ASP.Net Web API
所以我想删除 #!在我的 angular 站点中并过渡到 html5。我查看了其他指南,并在索引文件中使用 locationProvider 和 base 实现了它们。当您通过 ng-href 将其定向到 link 时,该站点工作正常,但是当我按 refresh/directly 输入 url 时,我收到 404 错误。我正在阅读这与服务器端有关,因为 .otherwise() 是一个 hashbang 函数,所以当 404 被击中时它不知道路由到哪里。
话虽这么说,但我查看了 WebApi 配置,发现我已经定向了一个默认 routeTemplate,如果它要命中 404,如下所示。
// 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();
如有任何帮助,我们将不胜感激
向您的项目添加配置以启用 HTML5 模式并删除前缀
.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); // by default '!'
$locationProvider.html5Mode({
enabled: true
});
}]);
正如您正确提到的,问题出在服务器端。当您刷新浏览器时,AngularJS 路由不会启动。浏览器会向服务器发出请求。服务器未在所需位置找到任何内容,因此它 returns 一个 404。
您在问题中发布的当前服务器端路由仅处理对您的网络的请求 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 文件夹中的 class RouteConfig 中),那么您的 RouteConfig class 应该类似于此
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");
}
}
}
所以我想删除 #!在我的 angular 站点中并过渡到 html5。我查看了其他指南,并在索引文件中使用 locationProvider 和 base 实现了它们。当您通过 ng-href 将其定向到 link 时,该站点工作正常,但是当我按 refresh/directly 输入 url 时,我收到 404 错误。我正在阅读这与服务器端有关,因为 .otherwise() 是一个 hashbang 函数,所以当 404 被击中时它不知道路由到哪里。
话虽这么说,但我查看了 WebApi 配置,发现我已经定向了一个默认 routeTemplate,如果它要命中 404,如下所示。
// 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();
如有任何帮助,我们将不胜感激
向您的项目添加配置以启用 HTML5 模式并删除前缀
.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); // by default '!'
$locationProvider.html5Mode({
enabled: true
});
}]);
正如您正确提到的,问题出在服务器端。当您刷新浏览器时,AngularJS 路由不会启动。浏览器会向服务器发出请求。服务器未在所需位置找到任何内容,因此它 returns 一个 404。
您在问题中发布的当前服务器端路由仅处理对您的网络的请求 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 文件夹中的 class RouteConfig 中),那么您的 RouteConfig class 应该类似于此
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");
}
}
}