<!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. Eclipse引入BASE64Encoder的问题

    在代码中引用了BASE64Encoder,上面显示的错误信息如下: Access restriction: The type BASE64Encoder is not accessible due t ...

  2. 吴恩达深度学习笔记（九） —— FaceNet

    主要内容: 一.FaceNet人脸识别简介 二.使用神经网络对人脸进行编码 三.代价函数triple loss 四.人脸库 五.人脸认证与人脸识别 一.FaceNet简介 1.FaceNet是一个深层 ...

  3. 异常:没有找到本地方法库,java.lang.UnsatisfiedLinkError: no trsbean in java.library.path

    1.问题描述 迁移环境中遇到这个问题 : Fri Apr 20 15:22:31 CST 2018, Exception:500004___-500004,没有找到本地方法库,java.lang.Un ...

  4. pylab.show()没有显示图形图像（python的matplotlib画图包）

    no display name and no $DISPLAY environment variable ============================ @Neil's answer is ...

  5. java 类装载器原理

    问题引入:getClass().getClassLoader().getResource(path),各自代表什么意思? 解答:getClass():获得当前对象所属的Class对象 getClass ...

  6. mapreduce实现学生平均成绩

    思路: 首先从文本读入一行数据,按空格对字符串进行切割,切割后包含学生姓名和某一科的成绩,map输出key->学生姓名    value->某一个成绩 然后在reduce里面对成绩进行遍历 ...

  7. aodh M版本新特性 - queue between alarm evaluator and alarm notifier

    之前alarm evaluator service and alarm notifier services之间的通信采用RPC的方式,消耗较大,增加work queue的方式可以获得更好的性能, + ...

  8. mogon操作数据库

    返回的本来就是promise redis是内存数据库,更适合放session等一些东西.而mongo不是.

  9. 奔跑吧，OpenStack现场分享：超融合架构如何抹平物理硬件差异？

    转自:https://www.ustack.com/blog/moping/ “通过引入OpenStack这一中间层,实现了云平台统一的管理调度支配向上交付,解决了业务的灵活性问题.但是在抹平下层物理 ...

  10. Spring3.2.9 + JdbcTemplate 事务

    XML新增声明式事务配置 <!-- 事务管理器 --> <bean id="transactionManager" class="org.springf ...