angularjs – $ location /在html5和hashbang模式/链接重写之间切换

前端之家收集整理的这篇文章主要介绍了angularjs – $ location /在html5和hashbang模式/链接重写之间切换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的印象是,Angular将重写在临时标记中的锚标签的href属性中出现的URL,这样它们将在html5模式或散列模式下工作。 documentation for the location service似乎说HTML链接重写照顾哈勃的情况。因此,我希望,当不是在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代码中跨两种模式统一解释路径。它不是关于如何使一个web服务器做兼容HTML5的重写请求。

文档不是很清楚AngularJS路由。它谈到Hashbang和HTML5模式。事实上,AngularJS路由操作有三种模式:

>哈希模式
> HTML5模式
> Hashbang在HTML5模式

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

为了模拟URL重写,你必须实际设置html5mode为true,并装饰$ sniffer类如下:

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

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

哈希模式

组态:

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

当您需要在HTML文件中使用带有哈希值的网址(例如)时,就是这种情况

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

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

从纯Hashbang模式中可以看出,HTML文件中的所有链接都必须以基础开头,例如“index.html#!”。

HTML5模式

组态:

$routeProvider
  .when('/path',});
$locationProvider
  .html5Mode(true);

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

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

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

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

浏览器中的链接

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

Hashbang在HTML5模式

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

组态:

$provide.decorator('$sniffer',function($delegate) {
  $delegate.history = false;
  return $delegate;
});
$routeProvider
  .when('/path',});
$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
原文链接:https://www.f2er.com/angularjs/147524.html

猜你在找的Angularjs相关文章