AngularJs Using $location详解及示例代码(2)

$location服务有两个配置模式,可以控制浏览器地址栏的URL格式:Hashbang mode(默认)与基于使用HTML5 History API的HTML5 mode。在两种模式下,应用都使用相同的API,$location服务会与正确的URL片段、浏览器API一起协作,帮助我们进行浏览器URL变更以及历史管理。

AngularJs Using $location详解及示例代码

AngularJs Using $location详解及示例代码

1. Hashbang mode (default mode)

  在这个模式中,$location在所有浏览器中都使用Hashbang URL。查看下面的代码片段,可以了解更多:

it('should show example', inject( function($locationProvider) { $locationProvider.html5mode = false; $locationProvider.hashPrefix = '!'; }, function($location) { // open #!/a $location.absUrl() == 'http://host.com/base/index.html#!/a'; $location.path() == '/a'; $location.path('/foo'); $location.absUrl() == 'http://host.com/base/index.html#!/foo'; $location.search() == {};//search没东东的时候,返回空对象 $location.search({a: 'b', c: true}); $location.absUrl() == 'http://host.com/base/index.html#!/foo?a=b&c'; $location.path('/new').search('x=y');//可以用字符串的方式更改search,每次设置search,都会覆盖之前的search $location.absUrl() == 'http://host.com/base/index.html#!/new?x=y'; } ));

  Crawling your app(让google能够对我们的应用进行索引)

  如果我们想让我们的Ajax应用能够被索引,我们需要在head中增加一个特殊的meta标签:

                <meta content="!" />

  这样做,将让爬虫机器人使用_escaped_fragment_参数请求当前的链接,让我们的服务器认识爬虫机器人,并提供对应的HTML快照。想了解更多关于这个技术的信息,可以查看https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=zh-CN

四、HTML5 mode

  在HTML5模式中,$location服务的getter、setter通过HTML5的History API与浏览器URL进行交互,允许使用正规的path、search模块,代替hashbang的模式。如果部分浏览器不支持HTML5 History API,$location服务会自动退回到使用hashbang URL的模式。为了让我们能够从不清楚显示我们的应用的浏览器是否支持history API的担心中解脱出来,使用$location服务是一个正确的、最佳的选择。

  在旧版浏览器中打开一个正规的URL会转换为hashbangURL。

  在现代浏览器中打开一个hashbangURL,会重写为一个正规的URL。

1. 向前兼容旧版浏览器

  对于支持HTML5 history API的浏览器,$location回使用它们去写path和search。如果浏览器不支持history API,$location会转为提供Hashbang URL。这是$location服务自动转换的。

2. HTML link rewriting

  当我们使用history API mode的时候,我们对于不同的浏览器,需要不同的链接,但我们只需要提供正规的URL即可,例如<a href=”/some?foo=bar”>link</a>

当用户单击这个超链接时:

在旧的浏览器中,URL会改为/index.html#!/some?foo=bar

在现代浏览器中,URL会改为/some?foo=bar

  在下面的情况中,链接不会被重写,而是会使页面加载到对应Url中:

包含target的超链接:<a href="/ext/link?a=b" target="_self">link</a>

到不同domain的绝对链接:<a href="https://angularjs.org/">link</a>

设置了base路径后,通过” /”开头的链接到不同base路径的超链接:<a href="https://www.jb51.net/not-my-base/link">link</a>

3. server side

  使用这个方式,在服务端请求URL重定向,通常,我们需要重定向我们所有的链接到我们的应用中。(例如index.html)。

4. Crawling your app

  与之前相同

5. Relative links

  确保检查所有相对链接、图片、脚本等。我们必须在<head>中指定base url(<base href="https://www.jb51.net/my-base">),并在所有地方使用绝对url(以/开头)。因为相对URL会根据document的初始路径(通常与应用的root有所不同),转化为绝对url。(relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application)。

  我们十分鼓励在document root中运行允许使用History API的angular应用,因为这很好地照顾到相对链接的问题。

6. Sending links among different browsers

  (这里讲解了两种模式的地址可以适应不同浏览器,自动转换,又重复讲一次……)

7. 例子

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfgdd.html