本文轉(zhuǎn)自:風(fēng)輕云淡
AngularJS之頁(yè)面跳轉(zhuǎn)Route
- 除了引用AngularJs.js外癣亚，還要引用路由JS, "~/Scripts/angularjs/angular-route.js"
- 通過$routeProvider定義路由，示例:
var testModule = angular.module('testModule', ['ngRoute']);
testModule.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/2', {//'/2'定義的路由路徑好爬，以后通過此路徑訪問扒俯，通常定義為短路徑
templateUrl: "/home/index2",//"/home/index2"是路由實(shí)際訪問的路徑奶卓，可以是asp.net mvc的訪問路徑（如此例）一疯，也可是具體的頁(yè)面路徑，如“test/test.html"
controller:'testController'//路由跳轉(zhuǎn)的controller,后面必須定義此控制器
});
$routeProvider.when('/3', {
templateUrl: "/home/index3",
controller:'testController'
})
}]);
3.使用路由跳轉(zhuǎn)寝杖，結(jié)合ng-view做spa
3.1 在JS中使用$location進(jìn)行跳轉(zhuǎn)违施，如示例，在需要的時(shí)候調(diào)用goToIndex2即可:
testModule.controller("testController", ["$scope", "$location", function ($scope, $location) {
$scope.goToIndex2 = function () {
$location.path("/2")
}
}]);
3.2 在html代碼中使用href="#path"來進(jìn)行跳轉(zhuǎn)
<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"方式進(jìn)行跳轉(zhuǎn)-->
<a href="#/2" class="btn btn-default" >Index2</a>
</header>
<div ng-view>
</div>
<footer>PAGE FOOTER</footer>
</div>
</body>
</html>
