gpt4 book ai didi

angularjs - 使用深度链接刷新 html 模式 Angular 应用程序

转载 作者:行者123 更新时间:2023-12-02 23:49:38 24 4
gpt4 key购买 nike

像我之前的许多人一样,我正在努力使用我的 Angular 应用程序进行页面刷新。

我正在使用 Angular/require/webapi。我从 angular phone tutorial 扩展了这个

我把这个项目放在github上还有

这是我现在坐的地方。

我已经设置了路线。它们处于 html 模式。他们负责网站导航。刷新引起了问题。我设置代码 Gobal.asax.cs 将故障重新路由到 index.html。基本页面(/phones)能够刷新。当刷新详细信息页面 (phones/motorola-xoom-with-wi-fi) 时,会出现错误。

这是我的路线代码

define(['angular', 'app', 'angularRoute'], function (angular, app)
{
'use strict';

var myApp = app.config(['$routeProvider', '$provide', '$locationProvider', function ($routeProvider, $provide, $locationProvider) {

//$provide.decorator('$sniffer', function ($delegate) {
// $delegate.history = false;
// return $delegate;
//});

$routeProvider
.when('/', {
redirectTo: '/phones'
})

.when('/phones', {
templateUrl: '../Web/Templates/partials/_phones.html',
controller: 'PhoneList'
})

.when('/phones/:phoneId', {
templateUrl: '../Web/Templates/partials/_phone-detail.html',
controller: 'PhoneDetail'
});
//.otherwise({
// redirectTo: '/phones'
//});


// enable html5Mode for pushstate ('#'-less URLs)
//$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);

}]);

return myApp;
});

我的global.asax.cs

public class WebApiApplication : System.Web.HttpApplication
{
private const string ROOT_DOCUMENT = "index.html";

protected void Application_Start()
{
GlobalConfiguration.Configure(WebApiConfig.Register);
}



protected void Application_BeginRequest(Object sender, EventArgs e)
{
string url = Request.Url.LocalPath;
string[] newURL = new string[1];
newURL[0] = ROOT_DOCUMENT;
if (!System.IO.File.Exists(Context.Server.MapPath(url)))
Context.RewritePath(ROOT_DOCUMENT);
}
}

还有我的index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<title>Angular-RequireJS sample app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script data-main="Scripts/app/main" src="Scripts/lib/require.js"></script>-->
<link rel="stylesheet" type="text/css" media="all" href="Content/css/app.css" />
<link rel="stylesheet" type="text/css" media="all" href="Content/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="all" href="Content/css/bootstrap-responsive.css" />
<base href="/">
</head>

<body>
<div class="container-fluid">
<p>Single Page Web Ap</p>
<div ng-view></div>
</div>
<script data-main="Scripts/app/main" src="Scripts/lib/require.js"></script>
</body>
</html>

最佳答案

这应该可以解决问题 - 更改常量定义:

private const string ROOT_DOCUMENT = "/index.html";
// instead of this
// private const string ROOT_DOCUMENT = "index.html";

另请在此处查看:How to: Configure your server to work with html5Mode (向下滚动到 ASP.Net C# Rewrites) 查看该片段:

private const string ROOT_DOCUMENT = "/default.aspx";

protected void Application_BeginRequest( Object sender, EventArgs e )
{
string url = Request.Url.LocalPath;
if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
Context.RewritePath( ROOT_DOCUMENT );
}

请注意,我还建议更改 Application_BeginRequest 以正确处理如下所示的 API 请求:

protected void Application_BeginRequest(Object sender, EventArgs e)
{
var path = Request.Url.AbsolutePath;
var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);

if (isApi)
{
return;
}
...

关于angularjs - 使用深度链接刷新 html 模式 Angular 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23305019/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com