javascript – 为什么我的网址在使用angular时包含“!”?

前端之家收集整理的这篇文章主要介绍了javascript – 为什么我的网址在使用angular时包含“!”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我刚开始使用MEAN堆栈,我正在关注一些TUT.

我正在使用Angular的npm-views并尝试将html标签重定向到另一个html文件.但是,当我去localhost:3000时,我得到这个:localhost:3000 /#!/当我在该页面内的链接时,它只是添加了localhost:3000 /#!/#/ sl.

我的index.html就是这个(没有一些元素 – 太多的文本//我删除了所有的js和css文件,但我把它们都放在我的文件中):

我的home.html文件是这样的:

我的sl.html文件是这样的:

    
最佳答案
如果浏览器是HTML5浏览器,angularJS会将其重定向到#!

否则它只会#.

请阅读此文档于$location,以了解更多有关这种情况发生的原因.

opening a regular URL in a legacy browser -> redirects to a hashbang

URL opening hashbang URL in a modern browser -> rewrites to a regular
URL

HTML5 mode

In HTML5 mode,the $location service getters and setters interact
with the browser URL address through the HTML5 history API. This
allows for use of regular URL path and search segments,instead of
their hashbang equivalents. If the HTML5 History API is not supported
by a browser,the $location service will fall back to using the
hashbang URLs automatically. This frees you from having to worry about
whether the browser displaying your app supports the history API or
not; the $location service transparently uses the best available
option.

opening a regular URL in a legacy browser -> redirects to a hashbang
URL opening hashbang URL in a modern browser -> rewrites to a regular
URL Note that in this mode,AngularJS intercepts all links (subject to
the “Html link rewriting” rules below) and updates the url in a way
that never performs a full page reload.

Example:

it('should show example',function() {
  module(function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
  });
  inject(function($location) {
    // in browser with HTML5 history support:
    // open http://example.com/#!/a -> rewrite to http://example.com/a
    // (replacing the http://example.com/#!/a history record)
    expect($location.path()).toBe('/a');

    $location.path('/foo');
    expect($location.absUrl()).toBe('http://example.com/foo');

    expect($location.search()).toEqual({});
    $location.search({a: 'b',c: true});
    expect($location.absUrl()).toBe('http://example.com/foo?a=b&c');

    $location.path('/new').search('x=y');
    expect($location.url()).toBe('/new?x=y');
    expect($location.absUrl()).toBe('http://example.com/new?x=y');
  });
});

it('should show example (when browser doesn\'t support HTML5 mode',function() {
  module(function($provide,$locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
    $provide.value('$sniffer',{history: false});
  });
  inject(initBrowser({ url: 'http://example.com/new?x=y',basePath: '/' }),function($location) {
    // in browser without html5 history support:
    // open http://example.com/new?x=y -> redirect to http://example.com/#!/new?x=y
    // (again replacing the http://example.com/new?x=y history item)
    expect($location.path()).toBe('/new');
    expect($location.search()).toEqual({x: 'y'});

    $location.path('/foo/bar');
    expect($location.path()).toBe('/foo/bar');
    expect($location.url()).toBe('/foo/bar?x=y');
    expect($location.absUrl()).toBe('http://example.com/#!/foo/bar?x=y');
  });
});

猜你在找的JavaScript相关文章