AngularJS 페이지 전환 루트 인 스 턴 스 코드
1.AngularJS.js 를 인용 하 는 것 외 에 도 JS,"~/Scripts/angularjs/angular-route.js"를 인용 해 야 한다.
2.$routeProvider 를 통 해 경로,예제 정의
var testModule = angular.module('testModule', ['ngRoute']);
testModule.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/2', {//'/2' ， ，
templateUrl: "/home/index2",//"/home/index2" ， asp.net mvc （ ）， ， “test/test.html"
controller:'testController'// controller,
});
$routeProvider.when('/3', {
templateUrl: "/home/index3",
controller:'testController'
})
}]);
3.1 JS 에서$location 을 사용 하여 점프 합 니 다.예 를 들 어 필요 할 때 goToIndex 2 를 호출 하면 됩 니 다.
testModule.controller("testController", ["$scope", "$location", function ($scope, $location) {
$scope.goToIndex2 = function () {
$location.path("/2")
}
}]);
<html >
<head>
<meta name="viewport" content="width=device-width" />
<title>Index1</title>
@Styles.Render("~/Content/css/base")
@Scripts.Render("~/script/base")
<script src="~/scripts/ngmoudle/app.js"></script>
</head>
<body>
<div ng-app="testModule" ng-controller="testController">
<header>
<h1>This is Index1</h1>
<button type="button" class="btn btn-default" ng-click="goToIndex2()">Index2</button>
<a href="#/3" class="btn btn-default">Index3</a><!-- heft="#path" -->
<a href="#/2" class="btn btn-default" >Index2</a>
</header>
<div ng-view>
</div>
<footer>PAGE FOOTER</footer>
</div>
</body>
</html>
새로운 프로젝트 는 Nuget 을 사용 하여 Angularjs 를 직접 가 져 온 후에 상기 쓰기 방법 에 따라 점프 할 수 없 음 을 발 견 했 습 니 다.증상 은Index 2를 클릭 한 후에 브 라 우 저 주소 가"\#22"로 바 뀌 었 고"/"변"%2F"로 인해 경로 가 이동 할 수 없 게 되 었 습 니 다.한 번 에 검색 하고 디 버 깅 을 한 후에 야 AngularJs 가 1.6 버 전에 서 주 소 를 특별 처리 한 것 을 발 견 했 습 니 다.원인 을 알 게 된 후에문 제 를 해결 하 는 것 도 간단 하 다.Angular 에서 기 존 방식 으로 돌아 가면 된다 고 밝 히 면 된다.
참조 가능http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working
testModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
testModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
AngularJS의 ng-options best practise쓸데없는 말은 하지 말고 바로 코드를 찍어라. 리소스를api에 직접 전달하지 말고 문자열이나 정형(예를 들어 귀속된ng-model="selected")을 권장합니다 angular에서 생성된 의value가 무엇인지, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
