为什么我的网址包含"!" 使用角度？

Question

为什么我的网址包含"!" 使用角度？

Die*_*ios 5 javascript node.js angularjs

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

我正在使用npm-views来自Angular并尝试将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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

</div>

Run Code Online (Sandbox Code Playgroud)

我的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pri*_*jee 3

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

否则就只是#。

请阅读$location上的此文档，以了解有关发生这种情况的更多信息。

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

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

HTML5模式

在 HTML5 模式下，$location服务 getter 和 setter 通过 HTML5 历史记录 API 与浏览器 URL 地址进行交互。这允许使用常规 URL 路径和搜索段，而不是其 hashbang 等效项。如果浏览器不支持 HTML5 History API，$location 服务将自动回退到使用 hashbang URL。这使您不必担心显示您的应用程序的浏览器是否支持历史记录 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');
  });
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，9 月前
查看次数：	193 次
最近记录：	8 年，9 月前