ngRoute沒有改變視圖當點擊<a>標記

我是新來的角JS和卡住的問題......我不知道發生了什麼事情。請幫助解決它。ngRoute沒有改變視圖當點擊<a>標記

我有索引文件和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個連接到家庭，職位和聯繫人頁面... 。當我點擊任何一個....它不會改變看法，但不斷變化網址，如：

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>

我新... PLZ DNT介意我長explanition ...感謝

來源

2017-02-28 Moiz Ahmad

UPDATE

OK，所以我可以找出你正在嘗試做的，爲什麼你的路由不工作。

首先恢復的變化，所以你將有鏈接部分按原來的格式：

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

來源

2017-02-28 21:38:15 Yaser

我用ng-click只是爲了檢查鏈接是否工作......沒有別的...... –

我刪除了ng-click和＃從鏈接...但仍然鏈接不導航到所需的模板... –

你可以創建一個笨蛋嗎？ – Yaser

ngRoute沒有改變視圖當點擊<a>標記

回答

相關問題