<!DOCTYPE html>
<html ng-app="AngularApp">
<head>
<meta charset="UTF-8">
<title></title>
<!-- href="#！/index" 注意一定要加上 #!/ 这是1.6.0 -->
<script type="text/javascript" src="js/js/angular.min.js" ></script>
<script type="text/javascript" src="js/js/angular-route.min.js" ></script>
<!-- 第一步 是导入angular核心组件和route插件 这是 1.3.0 -->
<!-- href="#index" 注意一定不要加上#！ -->
<!--<script type="text/javascript" src="js/angular.min.js" ></script>
<script src="//cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>-->

</head>
<body>
<!-- 第二部 设置视图 -->
<div ng-controller="RuteIndexCtrl">
<a href="#!/index">首页</a>
<a href="#!/student">学员</a>
<a href="#!/class">课程</a>
<div ng-view></div>
</div>
</body>

<script type="text/javascript">
var _routeApp = angular.module("AngularApp",['ngRoute']);//注意： 一定不要忘记设置路由依赖
//$routeProvider 创建和维护路由表
//config 配置路由器
_routeApp.config(['$routeProvider',function($routeProvider){
$routeProvider.when(
'/index',{
templateUrl:"tpls/index.html",
controller:'RuteIndexCtrl'
}
).when(
'/student',{
templateUrl:'tpls/student.html',
controller:'RuteStudentCtrl'
}
).when(
'/class',{
templateUrl:'tpls/class.html',
controller:'RuteClassCtrl'
}
).otherwise(
{
redirectTo:'/index'
}
);
}]);
//run 切换路由事件
_routeApp.run(['$rootScope',function($rootScope){

$rootScope.$on('$routeChangeStart',function(){
console.log("start");
});

}]);

_routeApp.controller('RuteIndexCtrl',function($scope){
$scope.name = "首页";
});
_routeApp.controller('RuteStudentCtrl',function($scope){
$scope.name = "学员";
});
_routeApp.controller('RuteClassCtrl',function($scope){
$scope.name = "课程";
});
</script>
</html>

随机推荐

  1. maven创建web工程Spring配置文件找不到

    使用maven创建web工程,将Spring配置文件applicationContext.xml放在src/resource下,用eclipse编译时提示class path resource [ap ...

  2. Linux 一键安装 webmin/virtualmin

    Webmin是一个可运行于Linux/freebsd的web界面的主机管理系统,而Virtualmin是一个基于Webmin的虚拟主机管理模块. webmin官方站: http://www.webmi ...

  3. Could not reserve enough space for object heap解决办法

    Centos6.4  Jdk1.6 1.在终端输入Java命令报错 [root@localhost local]# java Error occurred during initialization ...

  4. GDKOI2017游记

    去年的GDKOI在寒假(虽然我没参加),但由于一些机♂缘♂巧♂合♂,比赛时间变成了开学之后的第一周,于是直接导致了当我的同学们在认真学习的同时,我在广州无所事事地和同学谈♂笑♂风♂生♂.(太好了,可以 ...

  5. dedecms 织梦列表页标题增加显示页数

    判断是否为第一页,为第一页则不显示页数的代码: {dede:pagelist listsize='0' listitem='pageno' function='html2text(@me)' runp ...

  6. 考勤助手——基于CS三层结构的子系统设计

    因为小组比较倾向于cs分层结构的风格,所以基于对考勤助手最初的体系架构的设计进行了子系统的分层设计,如下图: 1.教务老师安排课程子系统 2.教务老师查询相关信息的子系统 3.任课教师管理考勤子系统 ...

  7. java assert的使用并深入解析Java的assertion

    java assert的使用并深入解析Java的assertion 分类: java2012-12-05 13:32 2020人阅读 评论(0) 收藏 举报 原文出处:http://blog.csdn ...

  8. Codeforces Round #374 (Div. 2) A , B , C 水，水，拓扑dp

    A. One-dimensional Japanese Crossword time limit per test 1 second memory limit per test 256 megabyt ...

  9. pandas读取Excel

    time31 = pd.read_excel('F:/save_file/3问出车表.xlsx', sheetname='Sheet1') # 读取‘3问出车表.xlsx’中的Sheet1表单, ti ...

  10. neutron 虚拟机网络问题调试

    1. Security Group全部打开,这是最基本的,但是很多人容易忘记 2. 通过界面查看虚拟机的log,也可以在compute节点上查看console.log文件,看看里面是否有DHCP获取I ...