为什么我的网址包含“！”使用角度时？答案

【问题标题】：Why does my url contains "!" when using angular?为什么我的网址包含“！”使用角度时？
【发布时间】：2017-02-03 22:15:01
【问题描述】：

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

我正在使用来自 Angular 的 npm-views 并尝试将 html a 标记重定向到另一个 html 文件。但是，当我转到 localhost:3000 时，我得到了这个：localhost:3000/#!/，当我在该页面内添加链接时，它只是添加了 localhost:3000/#!/#%2Fsl。

我的 index.html 是这个（没有一些元素 -- 文本太多 // 我删除了所有的 js 和 css 文件，但我的文件中都有它们）：

<!DOCTYPE html>
<html ng-app="firstApp">

<head>

<script type="text/javascript">

var app = angular.module('firstApp',['ngRoute']);

app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'home.html',
        controller: 'HomeController',
    })
    .when('/sl', {
        templateUrl: 'sl.html',
        controller: 'SLController',
    });

});

app.controller('HomeController', function ($scope,  $http){
    console.log('Home page');
});

app.controller('SLController', function ($scope, $http){
    console.log('Signup page');
});

</script>
  <title>First Node.JS app</title>

</head>

<body>
    <div class="container-fluid">

    <h1 id="indexTitle"> MyFirst App </h1>
    <div ng-view></div>

    </div>
</body>

</html>

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

<div class="container main-forms" id="main-forms">

    <h3 id="letMeIn1"><a href="#/sl" id="letMeIn">Let me in</a></h3>

</div>

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

    <div class="container main-forms" id="main-forms">

    <div>

  <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active tab-btn"><a href="#login" class="tab-link" id="login1" aria-controls="login" role="tab" data-toggle="tab">Login</a></li>
        <li role="presentation" class="tab-btn"><a href="#signup" class="tab-link" id="signup1" aria-controls="signup" role="tab" data-toggle="tab">Sign Up</a></li>
      </ul>

  <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="login">

            <div class=" row main col-md-6 col-md-offset-3">

                <form class="form-group">

                    <h3 class="form-titles center-block">Login</h3>

                    <input type="text" class="form-control form-subtitles" placeholder="Usuario">

                    <input type="password" class="form-control form-subtitles" placeholder="Password">

                    <input type="submit" class="form-control form-subtitles btn btn-info" value="Login">

                </form>

            </div>


        </div>
        <div role="tabpanel" class="tab-pane" id="signup">
            <div class=" row main col-md-6 col-md-offset-3">

                <form class="form-group">

                    <h3 class="form-titles center-block">Sign Up</h3>

                    <input type="text" class="form-control form-subtitles" placeholder="Usuario">

                    <input type="text" class="form-control form-subtitles" placeholder="E-mail">

                    <input type="password" class="form-control form-subtitles" placeholder="Password">

                    <input type="submit" class="form-control form-subtitles btn btn-info" value="Signup">

                </form>

            </div>
        </div>






      </div>

    </div>

</div>

【问题讨论】：

可能是stackoverflow.com/a/4739713/218196。
您正在使用 hashbang 角度导航 - docs.angularjs.org/guide/$location
angularjs 1.6.0 (latest now) routes not working的可能重复

标签： javascript angularjs node.js

【解决方案1】：

如果浏览器是 HTML5 浏览器，angularJS 会将其重定向到 #!

否则只有#。

在$location 上阅读此文档，以了解更多关于为什么会发生这种情况的信息。

在旧版浏览器中打开常规 URL -> 重定向到 hashbang

URL 在现代浏览器中打开 hashbang URL -> 重写为常规网址

HTML5模式

在 HTML5 模式下，$location 服务 getter 和 setter 交互通过 HTML5 历史 API 使用浏览器 URL 地址。这允许使用常规 URL 路径和搜索段，而不是他们的 hashbang 等价物。如果不支持 HTML5 History API 通过浏览器，$location 服务将回退到使用 hashbang URLs 自动。这让您不必担心显示您的应用的浏览器是否支持历史 API 或不是; $location 服务透明地使用最好的选项。

在旧版浏览器中打开常规 URL -> 重定向到 hashbang URL 在现代浏览器中打开 hashbang URL -> 重写为常规 URL 注意，在这种模式下，AngularJS 会拦截所有链接（以下面的“Html链接重写”规则）并以某种方式更新url 永远不会执行完整的页面重新加载。

示例：

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');
  });
});

【讨论】：

谢谢。我应该怎么做才能修复将我发送到localhost:3000/#!/#%2Fsl的链接
@DiegoRios 尝试使用$locationProvider.hashPrefix('');
而且我不认为我在旧版浏览器中运行它。最新的 Chrome 是旧版浏览器吗？