为什么我的url在使用angular时包含“！”？
我刚开始使用MEAN栈，我正在跟踪一些TUT。
我正在使用Angular的npm-views ，并试图将html标签redirect到另一个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>
如果浏览器是HTML5浏览器，angularJS将把它redirect到＃！
否则，它将只是＃。
请阅读$ location的这个文档，了解更多关于这个的原因。
在旧版浏览器中打开常规url – >redirect到hashbang
url在现代浏览器中打开hashbangurl – >重写为常规url
HTML5模式
在HTML5模式下，
$location服务获取器和设置器通过HTML5历史API与浏览器URL地址交互。 这允许使用常规的URLpath和search段，而不是hashbang等价物。 如果浏览器不支持HTML5 History API，则$ location服务将自动回退到使用hashbang URL。 这使您不必担心显示应用程序的浏览器是否支持历史API; $ location服务透明地使用最好的可用选项。在旧式浏览器中打开常规URL – >redirect到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'); }); });