我正在使用 ng-viewport 在 index.html 中显示我的页面,在 HTML 5 模式下,当我们打开基本 URL(例如 http://localhost:86 )时,一切工作正常,加载并转换为( http://localhost:86/app/dashboard ) )这是我的主页或登陆页面,所有其他重定向均正常工作。
当我们直接尝试打开完整的URL(例如 http://localhost:86/app/dashboard )时,就会出现问题,它正在加载我的index.html页面,但只显示 Logo 和图像等静态内容,而不显示我的动态网页显示在 ng-viewport 部分。重新加载任何页面时都会出现相同的行为。
以下是我编写的代码。
JS 代码。
$locationProvider.html5Mode({ enabled: true });
HTML 代码
<head>
<base href="/"/>
</head>
<body>
<div>
<img class="rotate" src="../assets/img/logo_img.png" />
</div>
<div style="height: 100%" ng-viewport autoscroll>
</div>
</body>
Web.Config
<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
<defaultDocument>
<files>
<clear />
<add value="index.html" />
<add value="Default.htm" />
<add value="Default.asp" />
<add value="index.htm" />
<add value="iisstart.htm" />
<add value="default.aspx" />
</files>
</defaultDocument>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="App_Data" />
</hiddenSegments>
</requestFiltering>
</security>
<rewrite>
<rules>
<clear />
<rule name="AngularJS" enabled="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(Api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
路由配置代码
static $routeConfig = [{
path: '/dashboard/:type',
component: 'dashboard'
}, {
path: '/dashboard',
component: 'dashboard'
}, {
path: '/mail',
component: 'mail'
}, {
path: '/solution/:id',
component: 'solutionDetails'
}]
最佳答案
该问题与我的 js 和 css 文件的相对和绝对路径有关。 我已在要加载到 index.html 中的所有文件路径前面添加了/,现在一切都非常顺利。
**Earlier :** <script src="app.js"></script>
**Now:** <script src="/app.js"></script>
关于javascript - HTML 5 模式深层链接和刷新不起作用 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42530671/