您的位置：首页 > Web前端 > AngularJS

Angular路由实现单页面切换

2017-10-17 19:23 921 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular路由实现单页面切换</title>
<script src="AngularJS/angular.js"></script>
<script src="AngularJS/angular-route.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",['ngRoute']);
app.controller("myCtrl01",function ($scope,$route) {
$scope.$route = $route;
});
app.controller("myCtrl02",function ($scope,$route) {
$scope.$route = $route;
});
app.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when('/home',{
templateUrl:'home.html',
controller:'myCtrl01'
})
.when('/second',{
templateUrl:'second.html',
controller:'myCtrl02'
})
.otherwise({
redirectTo:'/home'
});
}]);
app.controller("myCtrl",function ($scope) {

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<script type="text/ng-template" id="home.html">
<h1>Home</h1>
</script>
<script type="text/ng-template" id="second.html">
<h1>Second</h1>
</script>
<div>
<a href="#/home">HOME</a>
<a href="#/second">SECOND</a>
</div>
<div  ng-view style="width: 200px; height: 200px;border: 1px dashed blue">

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航