AngularJS路由无法正常工作

Question

我需要有关AngularJS中的路由的帮助。 我是新手，请不要误解为什么它不起作用。 我有一个小的应用程序与页面。 我的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时，我单击引用，但没有任何反应。 但是我有以下URL：“ http：// localhost：8080 /＃！/＃suggestion％2F0”并停留在主页上。 如果我这样手动输入url：“ http：// localhost：8080 /＃！/ suggestion / 0”，一切都很好，然后转到建议页面。 然后我按回去：

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

而且有效！ 我在主页上，但URL是：“ http：// localhost：8080 /＃！/＃％2F”我不知道为什么！ 请帮我。

Answer 1

如果代码片段没有任何意义，那么检查“ 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: '/'
        });
    }]);

AngularJS路由无法正常工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-02-08 15:06:09

AngularJS路由无法正常工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-02-08 15:06:09

解决方案1
0 已采纳 2017-02-08 15:06:09