Fatal编程技术网

AngularJS路由多重重定向

angularjs routing

AngularJS路由多重重定向,angularjs,routing,Angularjs,Routing,这是我的密码： 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, i

这是我的密码：

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>

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

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

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

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



    

  • 
{{item.itemName}大写}

    •
addItem.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>

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

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


在下面添加项目
输出显示“添加杂货项目”按钮以及杂货项目。但是，当单击“添加杂货项目”按钮时，它不会重定向到任何页面。这是对

谢谢您的帮助。

我在本地运行了您的代码，问题似乎与路由的
hashPrefix
有关。 似乎默认前缀是
#/，因此您的URL应以它开头：


<a href="#!/addItem" ...>
<a href="#!/" ...>


这将更改默认前缀并将其改为
#/
，而不是
#/

这样，您的所有网站URL都可以正常工作，而无需更改任何其他内容