单击 <a> 标记时 ngRoute 不会更改视图

Question

我是 Angular JS 的新手，遇到了一个问题...我不知道是什么 happening.Please 帮助修复它。

我有索引文件并且 app.js 已连接，应用程序正在使用 ngRoute...请参阅下面的代码。

var app = angular.module('routedapp',['ngRoute']);
//app.config("$routeProvider",function($routeProvider)) also tried this

app.config(function($routeProvider) {
$routeProvider.when("/",{
    templateUrl: "views/home.html"
})
.when("/post",{
    templateUrl: "views/post.html"
})
.when("/contact",{
    templateUrl: "views/contact.html",
    controller: "contactCtrl"
})

})
app.controller('contactCtrl', function($scope){
$scope.lalteen = function(){
    console.log("clicked");
}

})

并且有 4 页... index.html , home.html , post.html 和 contact.html.

//index.html代码

<html>
<head>
<title>Routed</title>

</head>
<body ng-app="routedapp" >
<div>welcome</div>
<div>
    <p ng-click="lalteen()">click me</p>
</div>

<!-- views here-->
<div ng-view >
</div>
    <script src="vendor/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

最初，当 index.html 页面加载时，它在视图中显示 home.html 内容，home.html 有 3 个链接到主页，post 和联系页面....当我点击任何一个....它不会改变视图，但会不断改变 url，例如：

http://localhost/route/#!/#%2F  //for home <a> tag
http://localhost/route/#!/#contact //for contact <a> tag and other like that.

PS：以下是我在 post.html、home.html 和 contact.html 中的内容结构，看起来像...

<div>This is post page</div>
<p><a href="#/">Home<a/></p><br>
<p><a href="#/post" ng-click="lalteen()">post</a></p><br>
<p><a href="#/contact">contact</a></p><br>

我是新手...请不要介意我的长篇解释...谢谢

Answer 1

更新

好的，这样我就可以弄清楚您要做什么以及为什么您的路由不起作用。

首先还原更改，这样您的 link 部分将按照您的原始格式：

<div>This is post page</div>
<p><a href="#">Home<a/></p><br>
<p><a href="#post" ng-click="lalteen()">post</a></p><br>
<p><a href="#contact">contact</a></p><br>

然后在您的脚本中注入 $locationProvider 服务并将默认路由前缀设置为空字符串。

 app.config(function($routeProvider, $locationProvider) {
   //note that this line does the magic ;)
   $locationProvider.hashPrefix('');
   //normal routing here
   $routeProvider.when("/",{
     templateUrl: "views/home.html"
   })
   .when("/post",{
     templateUrl: "views/post.html"
   })
   .when("/contact",{
     templateUrl: "views/contact.html",
     controller: "contactCtrl"
   })
 })

为您创建了一个可用的 plunker here。

单击 <a> 标记时 ngRoute 不会更改视图

ngRoute is not changing view when click of <a> tag

angularjs

angular-ui-router

ngroute

route-provider

angularjs-ng-route