<a> 태그

을 클릭하면 ngRoute보기가 변경되지 않습니다. 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 코드

처음

<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 개 링크가 ... 내가 하나를 클릭 .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 ... 감사

출처

2017-02-28 Moiz Ahmad

UPDATE

확인을 내 긴 explanition를 새로운 마음입니다, 그래서 당신이하려고하는 이유 라우팅이 무엇을 알아낼 수있다 작동 안함.

당신이 당신의 원래 형식에 따라 링크 섹션이 있도록 먼저 변화를 되돌릴 :

<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 및 #을 제거했지만 여전히 링크가 원하는 템플릿으로 이동하지 않습니다 ... –

당신은 plunker 또는 무언가를 만들 수 있습니까? – Yaser

답변

관련 문제