私のURLに「！」が含まれているのはなぜですか？角を使うとき？

私はちょうどMEANスタックから始めました。私はいくつかのTUTsに従っています。私のURLに「！」が含まれているのはなぜですか？角を使うとき？

私は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ファイルはこれです：ブラウザがHTML5ブラウザangularJSのWiある場合

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

出典

2017-02-03 Diego Rios

おそらくhttp://stackoverflow.com/a/4739713/218196。 –

hashbangの角度ナビゲーションを使用しています - https://docs.angularjs.org/guide/$location – dmoo

[angularjs 1.6.0（最新のもの）ルートが動作しない可能性があります]（http：// stackoverflow。com/questions/41211875/anglesjs-1-6-0-latest-now-routes-not-working） – georgeawg

：

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

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

</div>

と私のsl.htmlファイルはこれですそれを＃にリダイレクトします！

それ以外の場合は＃だけです。

$locationでこの文書を読むと、なぜこのようなことが起こるのかが分かります。レガシーブラウザの正規URLを開く

- >定期 URLに書き換えて

HTML5モード
- >は、現代のブラウザでhashbangのURLを開くhashbang

URLにリダイレクト

HTML5モードでは、$locationサービスゲッターとセッターはHTML5履歴APIを通じてブラウザのURLアドレスとをやりとりします。このは、相当のhashbangの代わりに、通常のURLパスと検索セグメントを使用できます。 HTML5履歴APIがブラウザでに対応していない場合、$ locationサービスは自動的にのhashbang URLを使用するようになります。これにより、あなたのアプリを表示しているブラウザが履歴APIをサポートしているのか、がサポートされているのかを心配する必要がなくなります。 $ロケーションサービスは、利用可能な最良のオプションを透過的に使用します。

レガシーブラウザの正規URLを開く - >現代のブラウザでhashbangのURLを開くhashbang URLにリダイレクト - >は、このモードでは、AngularJSはにすべてのリンク（件名を傍受することを定期的に URL注に書き換えます。下記の「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'); 
    }); 
});

出典

2017-02-03 22:20:15

ありがとうございました。そして、私を 'localhost：3000 /＃！/＃％2Fsl'に送るリンクを修正するにはどうすればよいですか？ –

@DiegoRios' $ locationProvider.hashPrefix（ ''） 'を使って試してみてください。 –

そして、私はそれをレガシーブラウザで実行しているとは思わない。最新のChromeは従来のブラウザですか？ –

私のURLに「！」が含まれているのはなぜですか？角を使うとき？

答えて

関連する問題