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时，我点击参考，没有任何反应。但我有以下网址：＆＃34; http：// localhost：8080 /＃！/＃suggestion％2F0＆＃34;并留在主页。如果我像这样用手键入url：＆＃34; http：// localhost：8080 /＃！/ suggestion / 0＆＃34;一切都很好，我去建议页面。然后我按回来：

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

它有效！我在主页上，但网址是：＆＃34; http：// localhost：8080 /＃！/＃％2F＆＃34; 我不知道为什么！请帮帮我。

Answer 1

如此类似检查Plunker，如果代码段没有任何意义，还要关注plunker中index，home和suggestion.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: '/'
        });
    }]);

AngularJS路由无法正常工作

1 个答案: