角度不正确。 URL是localhost：8081 /＃！/＃pageName [英] Angular not routing properly. URL is localhost:8081/#!/#pageName
问题描述
我正在制作一个简单的Angular应用程序，该应用程序具有一个index.html，该应用程序根据所选导航栏项目将其他HTML页面加载为视图;但是，路由不能按预期工作。 main.html视图加载正常，但没有其他视图被加载，并且URL不是我期望的。
浏览器中显示的URL选择一个项目后， localhost：8081 /＃！/＃pageName 。我不知道'！'来自哪里，并且在pageName之前不应该有散列。我期望的URL是 localhost：8081 /＃/ pageName
app.js：
'use strict';
var app = angular.module（'videoGamesApp'，['ngRoute']）;
app.config（函数（$ routeProvider）{
$ routeProvider
.when（'/'，{
templateUrl：'views / main.html'，
控制器：'MainCtrl'
}）
.when（'/ rankingLists'，{
templateUrl：'views / rankingLists.html'，
controller：'ListedListsCtrl '
}）
.when（'/ addGame'，{
templateUrl：'views / addGame.html'，
controller：'AddGameCtrl'
}）
.when（'/ contact'，{
templateUrl：'views / contact.html'，
controller：'ContactCtrl'
}）
.otherwise（{
redirectTo：'/'
}）;
}）;
$ b app.controller（'MainCtrl'，function（$ scope）{
$ scope.message ='这是主页';
}）;
app.controller（'RankingListsCtrl'，function（$ scope）{
$ scope.message ='这是排名列表页';
}）;
app.controller（'AddGameCtrl'，function（$ scope）{
$ scope.message ='这是添加游戏页面';
}）;
app.controller（'ContactCtrl'，function（$ scope）{
$ scope.message ='这是联系页面';
}）;
index.html：
<！doctype html>
< html ng-app =videoGamesApp>
< head>
< meta charset =utf-8>
< meta name =descriptioncontent =>
< meta name =viewportcontent =width = device-width>
< link rel =stylesheethref =styles / main.css>
< link rel =stylesheethref =../ bower_components / bootstrap / dist / css / bootstrap.min.css>
< link rel =stylesheethref =../ bower_components / font-awesome / css / font-awesome.css>
< / head>
< body ng-controller =MainCtrl>
< header>
< nav class =navbar navbar-inverse>
< div class =container>
< div class =navbar-header>
< a class =navbar-brandhref =/> GAMING< / a>
< / div>
< ul class =nav navbar-nav>
< i>< a href =＃>< i class =fa fa-home>< / i>家庭及LT; / A>< /锂>
< li>< a href =＃rankingLists>< i class =fa fa-trophy>< / i>排名列表< / a>< / li>
< li>< a href =＃addGame>< i class =fa fa-gamepad>< / i>添加游戏< / li>< / li>
< li>< a href =＃contact>< i class =fa fa-comment>< / i>联系与LT; / A>< /锂>
< / ul>
< div class =col-sm-3 col-md-3 pull-right>
< form class =navbar-formrole =search>
< div class =input-group>
< input type =textclass =form-controlplaceholder =Searchname =sr ch-term>
< div class =input-group-btn>
< button class =btn btn-defaulttype =submit>
< i class =glyphicon glyphicon-search>< / i>
< / button>
< / div>
< / div>
< / form>
< / div>
< / div>
< / nav>
< / header>
< div id =main>
< div ng-view =>< / div>
< / div>
< script src =bower_components / angular / angular.js>< / script>
< script src =bower_components / angular-route / angular-route.js>< / script>
< script src =scripts / app.js>< / script>
< / body>
< / html>
为什么其他视图不加载？感叹号在URL中来自哪里？为什么在pageName之前有一个散列（我期望一个散列，而不是两个散列）。
为什么其他视图不加载？
你的意见不加载是因为你击中了路线。您使用1.6角度并期望1.5的行为。位置散列前缀发生了变化：
lockquote
由于aa077e8，用于$ location hash-bang $的默认哈希前缀
网址已从空字符串（''）更改为爆炸（'！'）。如果您的
应用程序不使用HTML5模式，或者在
不支持HTML5模式的浏览器上运行，并且您尚未指定自己的
哈希前缀，则客户端URL现在将包含一个 ！字首。对于
示例，而不是mydomain.com/#/a/b/c，网址将变为
mydomain.com /＃！/ a / b / c。
如果您确实不想使用哈希前缀，那么您可以通过向应用程序添加配置块来恢复
之前的行为：
appModule.config（['$ locationProvider'，function（$ locationProvider）{
$ locationProvider.hashPrefix（''）;}]）; 源
该怎么办？
1。设置HTML5模式为true
$ b
$ locationProvider.html5Mode（true）;
以及html标题中的html标题：
< base href =/>
最后更改< a ng-href =＃pagename> 至
< a ng-href =pagename>
2。返回到1.5的旧行为 - 手动设置哈希前缀
这将使您的应用程序按照您期望的方式工作。
app.config（['$ locationProvider'，function（$ locationProvider）{
$ locationProvider。 hashPrefix（''）;
}]）;
为什么在pageName之前有散列？
您链接的方式被视为哈希标签锚标签。这将滚动到具有给定ID的当前div。如果你用上述原因之一解决你的问题，这将被修复。
I am making a simple Angular application that has an index.html which loads other HTML pages as views based on which navbar item selected; however, the routing is not working as expected. The main.html view is loaded fine, but none of the other views are loaded, and the URL is not what I expect.
The URL that shows up in the browser after an item is selected is localhost:8081/#!/#pageName. I do not know where the '!' is coming from, and there should not be a hash before the pageName. The URL that I am expecting is localhost:8081/#/pageName
app.js:
'use strict';
var app = angular.module('videoGamesApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/rankedLists', {
templateUrl: 'views/rankedLists.html',
controller: 'RankedListsCtrl'
})
.when('/addGame', {
templateUrl: 'views/addGame.html',
controller: 'AddGameCtrl'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'ContactCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('MainCtrl', function($scope) {
$scope.message = 'THIS IS THE MAIN PAGE';
});
app.controller('RankedListsCtrl', function($scope) {
$scope.message = 'THIS IS THE RANKED LISTS PAGE';
});
app.controller('AddGameCtrl', function($scope) {
$scope.message = 'THIS IS THE ADD GAME PAGE';
});
app.controller('ContactCtrl', function($scope) {
$scope.message = 'THIS IS THE CONTACT PAGE';
});
index.html:
<!doctype html>
<html ng-app="videoGamesApp">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css">
</head>
<body ng-controller="MainCtrl">
<header>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">GAMING </a>
</div>
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#rankedLists"><i class="fa fa-trophy"></i> Ranked Lists</a></li>
<li><a href="#addGame"><i class="fa fa-gamepad"></i> Add a Game</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="sr ch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</header>
<div id="main">
<div ng-view=""></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
Why are the other views not loading? Where is the exclamation point coming from in the URL? Why is there a hash before the pageName (I expect one hash, not two).
Why are the other views not loading?
The reason why your views are not loaded is because you hit the route. You use 1.6 angular and expect the behaviour from 1.5. There has been a change in location hash-prefix:
Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c.
If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to you application:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); }]); Source
What to do?
1. Set HTML5mode true
$locationProvider.html5Mode(true);
and in html set base in html header:
<base href="/">
Lastly change <a ng-href="#pagename"> to
<a ng-href="pagename">
2. Go back to old behaviour from 1.5 - set hash prefix manually
This will make your app work as you expect in your question.
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
Why is there a hash before the pageName?
The way you link is treated as a hashtag anchor tag. Which will scroll down to the current div with the given id. If you fix your problem with one of the above reasons this will be fixed aswell.
这篇关于角度不正确。 URL是localhost：8081 /＃！/＃pageName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
