<a>タグ

私はAngular JSを新しくしていて、問題に巻き込まれました...何が起こっているのか分かりません。修正するのを助けてください。<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ページは、それがビューにhome.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>

は当初、home.htmlは、家庭、ポストとコンタクトページへの3つのリンクを持っています...私はいずれかをクリックし.when ....それはビューを変更するが、のような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>

私は新しいです... 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" 
    }) 
})

hereの作業中のプランジャを作成しました。

出典

2017-02-28 21:38:15 Yaser

リンクが動作しているかどうかを確認するためにng-clickを使用しています...他には何もありません.... –

リンクからng-clickと＃を削除しましたが、依然としてリンクが目的のテンプレートにナビゲートしていません... –

プランナーなどを作成できますか？ – Yaser

答えて

関連する問題