javascript - HTML 5 模式深层链接和刷新不起作用 AngularJS

标签 javascript jquery html angularjs pretty-urls

我正在使用 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/

相关文章:

javascript - 我可以使 BLOB 独立于浏览器工作吗?

javascript - 为什么在点击链接时进行 jquery/ajax 调用时无法获取值?

javascript - 基于单选按钮选择使用 jQuery 隐藏/显示文本框

html - float : None not working with Media Query

javascript - JSON 数据数组不是 JQPlot.js 的有效返回

javascript - 选择一个复选框并禁用其他复选框

Jquery 对象innerHTML 在 Firefox 中工作但在 IE 中不起作用?

html - 底部有锯齿形边框的容器仅适用于边框

html - 限制div的最小宽度

javascript - 使用循环和输入文本框创建对象属性名称