为什么我的网址在使用角度时包含“！”？
[英]Why does my url contains “!” when using angular?
问题描述
I just started with MEAN stack and i'm following some TUTs. 
我刚开始使用MEAN堆栈，我正在关注一些TUT。
I'm using the npm-views from Angular and trying to redirect an html a tag to another html file. 我使用的是npm-views从角，并试图重定向一个HTML a标签到另一个HTML文件。 However when I go to localhost:3000 I get this: localhost:3000/#!/ and the when I the link inside that page it simply adds localhost:3000/#!/#%2Fsl . 但是，当我转到localhost:3000我得到这个： localhost:3000/#!/当我在该页面内的链接时，它只是添加了localhost:3000/#!/#%2Fsl 。
My index.html is this (without some elements -- too much text // I removed all the js and css files but I have them all in my file): 我的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>
My home.html file is this: 我的home.html文件是这样的：
<div class="container main-forms" id="main-forms">
<h3 id="letMeIn1"><a href="#/sl" id="letMeIn">Let me in</a></h3>
</div>
and my sl.html file is this: 我的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>
1 个解决方案
解决方案1
3 已采纳 2017-02-03 22:20:15
If the browser is HTML5 browser angularJS will redirect it to #! 如果浏览器是HTML5浏览器，angularJS会将其重定向到＃！
Otherwise it will be only #. 否则它只会＃。
Read this documentation here on $location to find out more on why this happens. 请在$ 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
$locationservice getters and setters interact with the browser URL address through the HTML5 history API.$location服务getter和setter通过HTML5历史API与浏览器URL地址进行交互。 This allows for use of regular URL path and search segments, instead of their hashbang equivalents.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');
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.