码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS路由实现单页面跳转

时间:2017-05-08 17:51:51      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:app   模板   class   插入   分享   float   http   har   images   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由</title>
<script src="angular.min.js"></script>
<!--引入路由文件-->
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

</head>
<body ng-app=‘routeDemo‘>
<!--左边栏-->
<div id="navigator" style="width: 20%;display: inline-block;background-color: red;height: 400px;float: left">
<!--菜单-->
<ul>
<li><a href="#/home">首页</a></li>
<li><a href="#/woman">女装</a></li>
<li><a href="#/man">男装</a></li>
<li><a href="#/life">生活用品</a></li>
<li><a href="#/cook">厨房用品</a></li>
</ul>
</div>
<!--右边栏-->
<div style="width: 80%;display: inline-block;background-color: green;height: 400px;float: right">
<div ng-view=""></div>
</div>
</body>
<script type="text/ng-template" id="index.home.html">
<h1>这是首页</h1>
</script>
<script type="text/ng-template" id="index.woman.html">
<h1>这是女装</h1>
</script>
<script type="text/ng-template" id="index.man.html">
<h1>这是男装</h1>
</script>
<script type="text/ng-template" id="index.life.html">
<h1>这是生活馆</h1>
</script>
<script type="text/ng-template" id="index.cook.html">
<h1>这是厨房用品</h1>
</script>
<script type="text/javascript">
angular.module(‘routeDemo‘,[‘ngRoute‘])
.controller(‘HomeController‘,function ($scope,$route) {
$scope.$route = $route;
})
.controller(‘WomanController‘,function ($scope,$route) {
$scope.$route = $route;
})
.controller(‘WomanController‘,function ($scope,$route) {
$scope.$route = $route;
})
.controller(‘ManController‘,function ($scope,$route) {
$scope.$route = $route;
})
.controller(‘LifeController‘,function ($scope,$route) {
$scope.$route = $route;
})
.controller(‘CookController‘,function ($scope,$route) {
$scope.$route = $route;
})

//配置$routeProvider用来定义路由规则
//$routeProvider为我们提供了when(path,object)& other(object)函数按顺序定义所有路由,函数包含两个参数:
//@param1:url或者url正则规则
//@param2:路由配置对象
.config(function($routeProvider){
$routeProvider.
when(‘/home‘,{
//templateURL:插入ng-view的HTML模板文件
templateUrl:‘index.home.html‘,
controller:‘HomeController‘

}).
when(‘/woman‘,{
templateUrl:‘index.woman.html‘,
controller:‘WomanController‘
}).
when(‘/man‘,{
templateUrl:‘index.man.html‘,
controller:‘ManController‘
}).
when(‘/life‘,{
templateUrl:‘index.life.html‘,
controller:‘LifeController‘
}).
when(‘/cook‘,{
templateUrl:‘index.cook.html‘,
controller:‘CookController‘
})
})
</script>
</html>

  效果图:

技术分享

技术分享

 

AngularJS路由实现单页面跳转

标签:app   模板   class   插入   分享   float   http   har   images   

原文地址:http://www.cnblogs.com/chencuixin/p/6826176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!