<!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. 关于Hystrix

    RPC远程调用过程中如何防止服务雪崩效用 微服务中如何保护服务 Hystrix是一个微服务中关于服务保护框架,在分布式中能够实现对服务容错.出错之后的预备方案 背景 在今天,基于SOA的架构已经大行其 ...

  2. Why does typeof array with objects return “Object” and not “Array”?

    https://stackoverflow.com/questions/4775722/check-if-object-is-an-array One of the weird behaviour a ...

  3. js多个<ul>相应不同的点击事件

    $('ul').on("click","li#left",function(){ currentProvince = $(this).text().replac ...

  4. https阿里云证书购买与apache环境配置

    1.在阿里云云盾安全->CA证书购买 2.下载证书解压文件,一般有四个文件 3.在/etc/apache2  下创建一个文件夹cert 放入以上四个文件(路径可自己任意选择) 4.$sudo a ...

  5. Java -- JDBC 事务处理, 事务的隔离级别 脏读 不可重复读 等...

    1. 事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功. 数据库开启事务命令 •start transaction 开启事务 •Rollback  回滚事务 •Commit ...

  6. Pycharm更换pip源为国内

    Python里的pip是官方自带的源,国内使用pip安装的时候十分缓慢,所以最好是更换成中国国内的源地址. 目前国内靠谱的 pip 镜像源有: 清华: https://pypi.tuna.tsingh ...

  7. JavaScript数组和函数的使用

    数组 数组:一个有顺序,有长度的数据集合 作用:存储大量数据 一.数组的定义 1.构造函数法:使用构造函数法的时候,都会使用new关键字 var arr=new Array(): 当长度为0 的时候, ...

  8. 《Advanced Bash-scripting Guide》学习（四）：一个显示时间日期登录用户的脚本

    本文所选的例子来自于<Advanced Bash-scripting Gudie>一书,译者杨春敏 黄毅 编写一个脚本,显示时间和日期,列出所有的登录用户,显示系统的更新时间.然后这个脚本 ...

  9. Ceph pg分裂流程及可行性分析

    转自:https://www.ustack.com/blog/ceph-pg-fenlie/ 1 pg分裂 Ceph作为一个scalable的分布式系统,集群规模会逐渐增大,为了保证数据分布的均匀性, ...

  10. Highcharts中更新series的5种方法

    用Highcharts画图时,经常需要更新所画的图表,最常见的就是改变数据以更新图表.在Highcarts中,数据对应的参数是series.这儿就以图1的柱状图为例,列举如何更新series的5种方法 ...