AngularJS 路由无法正常工作答案

【问题标题】：AngularJS Routing doesn't work properlyAngularJS 路由无法正常工作
【发布时间】：2017-02-08 23:51:28
【问题描述】：

我需要 AngularJS 中的路由方面的帮助。我是新手，不明白为什么它不起作用。我有一个带有 to pages 的小应用程序。我的 app.js：

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: '/'
        });
});

我的看法：

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

主页：

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

当我在主页上并想转到 /suggestion/:id 时，我单击参考，但没有任何反应。但我有以下网址：“http://localhost:8080/#!/#suggestion%2F0”并留在主页上。如果我像这样手动输入 url：“http://localhost:8080/#!/suggestion/0”一切都很好，我会转到建议页面。然后我按回：

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

它有效！我在主页上，但 url 是：“http://localhost:8080/#!/#%2F” 我不知道为什么！请帮帮我。

【问题讨论】：

不要将# 放在您的href 标签中。
将其更改为最新的 Angular 版本。您目前使用的是哪个版本？
@MMK 说得好；您没有显示您拥有的角度版本，但保持角度版本和角度路线版本相同非常重要。 angular 1.2.28 是一个过时的旧版本，不推荐用于新项目。
@ruslan-krupenko 有意义吗？
Angular 版本是 1.6.1

标签： javascript angularjs

【解决方案1】：

类似的东西怎么样检查Plunker如果代码sn-p没有任何意义还要注意plunker中index、home和suggesting.html中的标记变化。您可以通过在单独的窗口中启动 plunker 预览 来编辑 plunker 并查看 URL 更改。

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: '/'
        });
    }]);

【讨论】：

效果很好！我非常感谢你。现在网址看起来不错。不再 '！'旁边 '＃'。这是什么意思？我不知道
@ruslan-krupenko 在 Angular 1.6.1 的较新版本中，角家伙决定设置 $locationProvider.hashPrefix('"!");所以通过设置 $locationProvider.hashPrefix('');在 app.js 中，您覆盖默认设置的内容。我希望它能清除它。
感谢您的解释。