草庐IT

angularjs - $location/html5和hashbang模式切换/链接重写

coder 2023-08-05 原文

我的印象是 Angular 会重写出现在模板中 anchor 标记的 href 属性中的 URL,这样它们就可以在 html5 模式或 hashbang 模式下工作。 documentation for the location service似乎是说 HTML 链接重写处理了 hashbang 的情况。因此,我希望当不处于 HTML5 模式时,将插入散列,而在 HTML5 模式下,它们不会。

但是,似乎没有进行重写。以下示例不允许我仅更改模式。应用程序中的所有链接都需要手动重写(或在运行时从变量派生)。我是否需要根据模式手动重写所有 URL?

我没有看到 Angular 1.0.6、1.1.4 或 1.1.3 中有任何客户端 url 重写。似乎所有 href 值都需要在 hashbang 模式和/html5 模式前加上#/。

是否需要一些配置才能导致重写?我误读了文档吗?在做其他傻事吗?

这是一个小例子:

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>

<body>
    <div ng-view></div>
    <script>
        angular.module('sample', [])
            .config(
        ['$routeProvider', '$locationProvider',
            function ($routeProvider, $locationProvider) {

                //commenting out this line (switching to hashbang mode) breaks the app
                //-- unless # is added to the templates
                $locationProvider.html5Mode(true);

                $routeProvider.when('/', {
                    template: 'this is home. go to <a href="/about"/>about</a>'
                });
                $routeProvider.when('/about', {
                    template: 'this is about. go to <a href="/"/>home</a'
                });
            }
        ])
            .run();
    </script>
</body>

附录:在重新阅读我的问题时,我发现我使用了“重写”一词,但没有充分说明我想重写的人和时间。问题是关于如何让 Angular 在呈现路径时重写 URL,以及如何让它在两种模式下统一解释 JS 代码中的路径。它不是关于如何使网络服务器执行与 HTML5 兼容的请求重写。

最佳答案

关于 AngularJS 路由的文档不是很清楚。它谈到了 Hashbang 和 HTML5 模式。事实上,AngularJS 路由以三种模式运行:

  • Hashbang 模式
  • HTML5 模式
  • HTML5模式下的Hashbang

对于每种模式,都有一个相应的 LocationUrl 类(LocationHashbangUrl、LocationUrl 和 LocationHashbangInHTML5Url)。

为了模拟 URL 重写,您实际上必须将 html5mode 设置为 true 并按如下方式修饰 $sniffer 类:

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

现在我将更详细地解释这一点:

Hashbang 模式

配置:

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
});
$locationProvider
  .html5Mode(false)
  .hashPrefix('!');

当您需要在 HTML 文件中使用带有哈希值的 URL 时,例如在

<a href="index.html#!/path">link</a>

在浏览器中,您必须使用以下链接:http://www.example.com/base/index.html#!/base/path

正如您在纯 Hashbang 模式中看到的那样,HTML 文件中的所有链接都必须以“index.html#!”等基数开头。

HTML5模式

配置:

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

您应该在 HTML 文件中设置基数

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

在此模式下,您可以在 HTML 文件中使用不带 # 的链接

<a href="/path">link</a>

浏览器中的链接:

http://www.example.com/base/path

HTML5模式下的Hashbang

当我们实际使用 HTML5 模式但在不兼容的浏览器中时,会激活此模式。我们可以通过修饰 $sniffer 服务并将 history 设置为 false 在兼容的浏览器中模拟这种模式。

配置:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});
$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true)
  .hashPrefix('!');

在 HTML 文件中设置基数:

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

在这种情况下,也可以在 HTML 文件中不使用哈希来编写链接

<a href="/path">link</a>

浏览器中的链接:

http://www.example.com/index.html#!/base/path

关于angularjs - $location/html5和hashbang模式切换/链接重写,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16910661/

有关angularjs - $location/html5和hashbang模式切换/链接重写的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2

    我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗?此外,仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件?谢谢! 最佳答案 是的,您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题,删除public/index/h

  5. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  6. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. ruby-on-rails - 我该怎么办 :remote location validation with CarrierWave? - 2

    我在我的Rails3示例应用程序上使用CarrierWave。我想验证远程位置上传,因此当用户提交无效URL(空白或非图像)时,我不会收到标准错误异常:CarrierWave::DownloadErrorinImageController#createtryingtodownloadafilewhichisnotservedoverHTTP这是我的模型:classPaintingtrue,:length=>{:minimum=>5,:maximum=>100}validates:image,:presence=>trueend这是我的Controller:classPaintingsC

  10. ruby - 是否有用于序列化和反序列化各种格式的对象层次结构的模式? - 2

    给定一个复杂的对象层次结构,幸运的是它不包含循环引用,我如何实现支持各种格式的序列化?我不是来讨论实际实现的。相反,我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby,我想解析XML和JSON数据以构建复杂的对象层次结构。此外,应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗?在任何提到的情况下,我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好,这样我以后就可以轻松支持多种XML格式。 最佳答案 我最

随机推荐