AngularJS Routing funktioniert nicht richtig

Ich brauche Hilfe beim Routing in AngularJS. Ich bin neu und verstehe nicht, warum es nicht funktioniert. Ich habe eine kleine Anwendung mit zu Seiten. meine app.js:AngularJS Routing funktioniert nicht richtig

var app = angular.module("suggestionBox", ["ngRoute"]); 

app.config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
      controller: 'HomeController', 
      templateUrl: 'views/home.html' 
     }) 
     .when('/suggestion/:id', { 
      controller: 'SuggestionController', 
      templateUrl: 'views/suggestion.html' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
});

meiner Sicht:

<form ng-submit="addSuggestion()" style="margin-top: 50px"> 
    <h3> Submit Your Suggestion </h3> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Great ideas here" ng-model="data.title"> 
    </div> 
    <button type="submit" class="btn btn-primary">Suggest</button> 
</form> 
<div class="posts-wraper"> 
    <div class="suggestion" ng-repeat="post in posts | orderBy: '-upvotes'"> 
     <h3>{{ post.title }}</h3> 
     <div> 
      <p> 
       <span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)"></span> Upvotes: {{post.upvotes}} 
      </p> 
      <a class="comment" href="#/suggestion/{{$index}}">Comments</a> 
     </div> 
    </div> 
</div>

Hauptseite:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Suggestion Box</title> 
    <script type="text/javascript" src="js/vendor/angular.min.js"></script> 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/main.css" rel="stylesheet"> 
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script> 
</head> 

<body ng-app="suggestionBox"> 

<div class="col-md-2"></div> 
<div class="col-md-8"> 
    <div ng-view></div> 
</div> 
<div class="col-md-2"></div> 

<!-- Modules --> 
<script type="text/javascript" src="js/app.js"></script> 

<!-- Controllers --> 
<script type="text/javascript" src="js/controllers/HomeController.js"></script> 
<script type="text/javascript" src="js/controllers/SuggestionController.js"></script> 

<!-- Services --> 
<script src="js/services/suggestions.js"></script> 

</body> 
</html>

Und wenn ich auf der Startseite bin und/Anregung gehen wollen /: ID Ich klicke auf Referenz und nichts passiert. Aber ich habe die folgende URL: "http: // localhost: 8080/#!/# Vorschlag% 2F0" und bleibe auf der Homepage. Wenn ich URL von Hand wie folgt eintipp: "http: // localhost: 8080/#!/Suggestion/0" alles ist gut und ich gehe auf Vorschlagsseite. Dann drücke ich zurück:

<a href="#/">Back</a>

und es funktioniert! Ich bin auf der Homepage, aber URL ist: "http: // localhost: 8080/#!/#% 2F" Ich weiß nicht warum! Bitte hilf mir dabei.

Quelle

2017-02-08 Ruslan Krupenko

nicht setzen '#' in Ihrem 'href' Tags. – Claies

Ändern Sie es zur neuesten eckigen Version. Welche Version verwenden Sie derzeit? – MMK

@MMK macht einen guten Punkt; Sie zeigen nicht, welche eckige Version Sie haben, aber es ist sehr wichtig, dass Sie die eckige Version und die eckige Version beibehalten. eckig 1.2.28 ist eine veraltete Legacy-Version, nicht wirklich für neue Projekte empfohlen. – Claies

Wie wäre es etwas wie das Überprüfung der Plunker wenn Code-Schnipsel keinen Sinn ihre Aufmerksamkeit auch Änderungen im Index, Haus und suggestion.html in Plunker Markup zahlen macht. Sie können den Plünderer bearbeiten und die URL-Änderungen anzeigen, indem Sie die Plottervorschau in einem separaten Fenster starten.

app.js

var app = angular.module("SuggestionBox", ['ngRoute']); 
    app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider){ 
     $locationProvider.hashPrefix(''); // magic line 
     $routeProvider 
     .when('/',{ 
      controller: "HomeController", 
      templateUrl: "views/home.html" 
     }) 
     .when('/suggestion/:id',{ 
      controller: "SuggestionController", 
      templateUrl: "views/suggestion.html" 
     })   
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }]);

Quelle

2017-02-08 15:06:09 MMK

Es funktioniert gut! Ich bin sehr dankbar für dich. Jetzt sieht die URL gut aus. Nicht mehr '!' neben an '#'. Was sollte das heißen? Ich weiß es nicht –

@ Ruslan-Krupenko In neueren Version von eckigen 1.6.1 eckige Jungs beschlossen, $ locationProvider.hashPrefix ('"!") Zu setzen; also durch Setzen von $ locationProvider.hashPrefix (''); In app.js überschreiben Sie, was standardmäßig festgelegt ist. Ich hoffe es klärt auf. – MMK

Danke für die Erklärung. –

AngularJS Routing funktioniert nicht richtig

Antwort

Verwandte Themen