AngularJS Routing multiple Redirection

问题

Here is my code:

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>

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

Thanks for you help.

回答1:

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="#!/" ...>

Instead of:

<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 #!/.

By doing so, all your website URLs will work without the need to change anything else.

来源：https://stackoverflow.com/questions/47988207/angularjs-routing-multiple-redirection

标签

angularjs

routing