Question

我刚开始使用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>

Answer 1

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

否则只会＃。

请在$location上阅读此文档，详细了解发生这种情况的原因。

在旧版浏览器中打开常规网址 - ＆gt;重定向到hashbang

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

HTML5模式

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

在旧版浏览器中打开常规网址 - ＆gt;重定向到hashbang   URL在现代浏览器中打开hashbang URL - ＆gt;重写为常规   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');
  });
});

为什么我的网址包含＆＃34;！＆＃34;使用角度？

1 个答案: