溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
AngulagJs的頁面使用Route跳轉
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.使用路由跳轉，結合ng-view做spa
3.1 在JS中使用$location進行跳轉，如示例，在需要的時候調用goToIndex2即可
testModule.controller("testController", ["$scope", "$location", function ($scope, $location) {
$scope.goToIndex2 = function () {
$location.path("/2")
}
}]);
3.2 在html代碼中使用href="#path"來進行跳轉
<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>
<h2>This is Index1</h2>
<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>
4.關于Angularjs版本不得不說的問題（追加部分），“/"變”%2F”問題
新的項目直接使用Nuget獲取Angularjs后，發現按照以上的寫法，不能跳轉了，表現癥狀為 <a href="#/2">Index2</a> 點擊之后，發現瀏覽器地址變為“#%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(''); }]);
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
