AngularJS路由不能正常工作

我需要帮助在AngularJS中进行路由。我是新的，不要低估它为什么不起作用。我有一个小页面的应用程序。我app.js：AngularJS路由不能正常工作

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>

当我主页上，并想去/建议/：我点击引用，什么也没有发生。但我有以下网址：“http：// localhost：8080 /＃！/＃suggestion％2F0”并留在主页。如果我这样手工输入url：“http：// localhost：8080 /＃！/ suggestion/0”一切正常，我会去建议页面。然后我按回：

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

它的工作原理！我在主页上，但网址是：“http：// localhost：8080 /＃！/＃％2F” 我不知道为什么！请帮助我。

来源

2017-02-08 Ruslan Krupenko

不要把''＃在'href'标签。 – Claies

将其更改为最新的Angular版本。你目前使用哪个版本？ – MMK

@MMK说得很好;你没有显示你有什么角度的版本，但它是**非常重要**，以保持角度版本和角度版本相同。 angular 1.2.28是一个过时的旧版本，不推荐用于新项目。 – Claies

那么类似这样的事情检查Plunker如果代码片段没有任何意义，还要注意索引中的标记更改，home和suggestion.html在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: '/' }); }]);

来源

2017-02-08 15:06:09 MMK

它运作良好！我非常感谢你。现在网址看起来很好。不再 '！'旁边的 '＃'。这是什么意思？我不知道 –

@ ruslan-krupenko在更新版本的角度1.6.1角度家伙决定设置$ locationProvider.hashPrefix（'“！”）;所以通过设置$ locationProvider.hashPrefix（''）;在app.js中，您将覆盖默认设置的内容。我希望它清除它。 – MMK

感谢您的解释。 –

AngularJS路由不能正常工作

回答

相关问题