AngularJS mehrere Redirection Routing

Hier ist mein Code:AngularJS mehrere Redirection 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, 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

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>

Die Ausgabe zeigt die In Grocery Taste Option zusammen mit den Lebensmitteleinzelteile. Wenn Sie jedoch auf die Schaltfläche zum Hinzufügen eines Lebensmittels klicken, wird nicht auf eine Seite umgeleitet. Dies ist eine Erweiterung zu Angular Module Routing not working

Danke für Ihre Hilfe.

Quelle

2017-12-27 Ashley

Ich habe Ihren Code lokal ausgeführt und das Problem scheint mit Route hashPrefix verwandt zu sein. Es scheint, dass das Standard-Präfix #!/ ist, so sollten Sie Ihre URLs damit anfangen:

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

Statt:

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

Dies erfordert, dass Sie jede herf in der Website ändern. Obwohl die elegantere Lösung mit loszuwerden der ! Marke sei, alle zusammen:

app.config(function($routeProvider, $locationProvider) { 
    $locationProvider.hashPrefix(''); 
    $routeProvider... 
     // Register routes... 
});

Dies wird den Standard-Präfix ändern und es #/ statt #!/ machen.

Auf diese Weise funktionieren alle URLs Ihrer Website, ohne dass Sie etwas ändern müssen.

Quelle

2017-12-27 10:03:45

Danke !! Es hat funktioniert !! – Ashley

Gern geschehen :) –

Sie können diese Antwort als akzeptiert markieren, wenn Sie nicht auf andere Antworten warten – hd84335

AngularJS mehrere Redirection Routing

Antwort

Verwandte Themen