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>
<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>
时间： 2024-10-17 06:41:07