<!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. JAVA基础补漏--基础数据类型与引用数据类型

    ==在不同数据类型中意义不同. 在基础数据类型中,表示的是数值的比较. 在引用数据类型中,表示的是内存地址值的比较. 一.基本数据类型: byte:Java中最小的数据类型,在内存中占8位(bit), ...

  2. Linux 修改DNS解决 Could not retrieve mirrorlist" 报错

    CentOS yum有时出现“Could not retrieve mirrorlist ”的解决办法——resolv.conf的配置 或者IP配置文件上写入 缺少DNS引起的问题1. 无法识别域名 ...

  3. sem总结

    从实况搜索这些关键词 有没有排名,有排名 不用管,没有的话 就一点点网上加价格 ,加到有为止 一个单元关键字控制30以内差不多 如果关键词词量有限 ,病种相差不大 可以不用屏蔽 投产=销量/消费订购率 ...

  4. 按F12 IE浏览器的开发工具打不开解决方法

    在电脑的任务栏中选中开发人员工具窗体右击,出现以下页面: 点击移动菜单项,然后用键盘的上下左右键移动,直到开发人员工具的最小化窗体出现:

  5. SpringCloud-分布式配置中心(config)

    简介 在分布式文件系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config ...

  6. 域名注册中EAP期间是什么意思

    所谓域名申请期间的EAP指的是,域名优先注册期,行业上也称为“早期接入期”,这个期间的时间是由该域名所在的管理注册局定,而这个EPA期的时间长度也不一样,有的是一个星期,也有的长达两个星期. 域名EA ...

  7. ReverseInteger

    public class ReverseInteger { public static int reverse(int x) { long ret = 0; //如果是个位数,直接返回. if(x/1 ...

  8. iso不支持document事件

    ios safari游览器除了a.input.button等不支持document事件委托?<body>加上这个样式即可 <style> .clickable-div { cu ...

  9. java笔试面试(转载）

    Java面试笔试题大汇总(最全+详细答案) 2016-02-01 15:23 13480人阅读 评论(8) 收藏 举报  分类: Java面试题(1)  声明:有人说, 有些面试题很变态,个人认为其实 ...

  10. 智课雅思词汇---十七、前綴il-, in-, ir-, im-有什麼關係

    智课雅思词汇---十七.前綴il-, in-, ir-, im-有什麼關係 一.总结 一句话总结:这几个长得非常像,并且意思也非常像 1.前綴il-, in-, ir-, im-是什麼意思? 前缀:i ...