个人中心
gpt4 book ai didi

AngularJS:UI-Router 解决路由 hash-bang 不起作用

转载 作者：行者123 更新时间：2023-12-02 01:13:33 26 4
gpt4 key购买 nike

我目前使用的是 Angular 版本 1.6.4。

为了解决我遇到的 hashbang 问题，我所有的 URL 都是这种格式:

http://localhost:8885/#/hotels/holiday-inn

我的 app.js 包括路由器(使用 ui-router):

$urlRouterProvider.otherwise('/');
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);

$stateProvider
    .state('index', {
        url: '/',
        templateUrl: 'index.html',
        controller: 'hotelController'
    })
    .state('login', {
        url: '/hotel/:name',
        templateUrl: 'views/hotel.html',
        controller: 'hotelController'
    });

我的 ui-view 位于 Index.cshtml(我以前在 _Layout.cshtml 中拥有所有内容，但将所有内容移动到 Index.cshtml):

<!DOCTYPE html>
<html ng-app="hotelScheduler">
<head>
    <meta charset="utf-8" />
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Application</title>
    <link href="~/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="~/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="~/js/app.js"></script>
    <script src="~/js/hotelController.js"></script>
</head>
<body>
    <div ui-view>
    </div>
</body>
</html>

现在我遇到了一个不同的问题。如果我访问 http://localhost:8885/hotel/holiday-inn，我会得到一个 404。

为什么会这样？

其他故障排除:

如果我访问 http://localhost:8885/#/hotel/，它会显示 index.html 而不是 views/hotel.html 并将地址更改为 http://localhost:8885/#%2Fhotel%2F。 (我知道这是路由中 otherwise 的工作，但为什么它与启动 hashbang 的 URL 一起工作？)

我一直在四处询问并在网上查看，人们建议剩下的就是通过 C# 的 MapRoute 或服务器端代码完成。

我将如何通过任一选项执行此操作？如果我要在服务器端执行此操作，我该如何通过 ASP.Net Core 和 Visual Studio 执行此操作？

这是我当前的 MapRoute:

app.UseMvc(config =>
{
    config.MapRoute(
        name: "Default",
        template: "{controller}/{action}/{id?}",
        defaults: new { controller = "App", action = "Index" }
    );
});

另一个编辑:基于评论的建议和https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode ，我已经尝试将此代码添加到我的 web.config 中以进行服务器重写:

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

但现在，绝对一切都只是重定向到根/主页:localhost:8885/。

有什么帮助吗？

最佳答案

$location 在 HTML5 模式下需要 <base>标 checkout 现。

通过文档:

If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode():

https://docs.angularjs.org/error/$location/nobase

解决方法是更新您的 $locationProvider代码:

 $locationProvider.html5Mode({
     enabled: true,
     requireBase: true
 });

然后，在你的 <head> 里面, 设置你的 <base>因此。最常见的模式是 / ，但您的应用程序可能需要从不同的文件夹访问 Assets 。

<head>
  <base href="/">
  ...
</head>

或者，如果你想变聪明，比如 https://plnkr.co用于引导 Angular 插件:

<head>
  <script>document.write('<base href="' + document.location + '" />');</script>
</head>

关于AngularJS:UI-Router 解决路由 hash-bang 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43791679/

26 4 0
文章推荐： r - 合并 2 个以上的数据帧，同时在 R 中分配一个标识符因子
文章推荐： emacs - 水平或垂直最大化 Emacs Windows
文章推荐： knitr - 在循环中结合传单和 Markdown
文章推荐： scala - 使用scala计算与spark的共现项
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com