AngularJS路由多个重定向 [英] AngularJS Routing multiple Redirection
问题描述
这是我的代码：
index.html
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html",
controller: "GroceryListItemsController"
})
.when("/addItem",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemsController"
})
// .otherwise({
// redirectTo: "/"
//})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
groceryList.html
<div class="col-xs-12">
<a href="#/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
addItem.html
<div class="col-xs-12">
<div class="jumbotron text-center">
<h1>Add Item Below</h1>
</div>
<form name="groceryForm">
<div class="form-group">
<input type="text" class="form-control" placeholder ="Grocery Item">
</div>
<div class="form-group">
<a href="#/" class="btn btn-success btn lg btn-block">
<span class="glyphicon glyphicon-pushpin"></span>
Save
</a>
</div>
<div class="form-group">
<a href="#/" class="btn btn-default btn lg btn-block">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</a>
</div>
</form>
</div>
输出显示添加杂货项目按钮和杂货项目。但是，单击添加杂货项目按钮时，它不会重定向到任何页面。这是对 Angular模块路由不起作用
The output is showing the Add Grocery Item button along with the grocery items. However when clicking the add grocery item button ,its not redirecting to any page. This is an extension to Angular Module Routing not working
谢谢您的帮助。
推荐答案
我在本地运行了代码，问题似乎与路由的 hashPrefix 。
似乎默认的前缀是＃！/ ，因此您的URL应该以它开头：
I ran your code locally and the problem seems to be related to route's hashPrefix.
It seems that the default prefix is #!/, so your URLs should start with it:
<a href="#!/addItem" ...>
<a href="#!/" ...>
而不是：
<a href="#/addItem" ...>
<a href="#/" ...>
这将要求您更改每个地域在网站上。尽管更优雅的解决方案是使用以下方法一起消除！标记：
This will require that you change every herf in the website. Though the more elegant solution would be to get rid of the ! mark all together using:
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider...
// Register routes...
});
这将更改默认前缀并将其设置为＃/ 而不是＃！/ 。
This will change the default prefix and make it #/ instead of #!/.
这样做，您所有的网站URL都可以正常工作更改其他任何内容。
By doing so, all your website URLs will work without the need to change anything else.
这篇关于AngularJS路由多个重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
