<!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. Python 字典Dict概念和操作

    # 字典概念:无序的, 可变的键值对集合 # 定义 # 方式1 # {key: value, key: value...} # 例如 # {"name": "xin&qu ...

  2. tomcat 正常启动但不能访问

    Eclipse中的Tomcat可以正常启动,不过发布项目之后,无法访问,包括http://localhost:8080/的小猫页面也无法访问到,报404错误.这是因为Eclipse所指定的Server ...

  3. 虚拟机开启Linux时出现“我以复制虚拟机”、“我已移动虚拟机”

    当出现标题的情况时,并且网络出现状况时,可以尝试一下解决办法 首先用ifconfig -a命令调出现在的网卡驱动的名称和HWaddr地址,然后再编辑/etc/sysconfig/networking/ ...

  4. QT5中如何使用QFtp类

    QT5中如何使用QFtp类 http://2662597.blog.51cto.com/2652597/1279806 由于QT5对QML的支持有很大的改进,所以打算将原来基于QT4的程序移植到QT5 ...

  5. Codeforces Round #285 (Div. 2) A, B , C 水, map ,拓扑

    A. Contest time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  6. python 2 到 3 的新手坑

    print 和 input print 我们在课程最开始的时候就讲过 print,在版本2的使用方法是: print 'this is version 2' 也可以是 print('this is v ...

  7. hibernate报错org.hibernate.SessionException: Session was already closed

    org.hibernate.SessionException: Session was already closedat org.hibernate.internal.SessionImpl.clos ...

  8. bootstrap参考网站

    http://www.chuntao.org.cn/http://www.dianxiaohuo.com/

  9. ThreadPool(线程池）

    WPF使用ThreadPool.QueueUserWorkItem线程池防界面假死 时间:2012-01-09 20:44来源:http://luacloud.com 作者:luacloud 点击:1 ...

  10. C# 6.0 (VS2015 CTP6)

    /* C# 6.0 demo https://github.com/dotnet/roslyn/wiki/Languages-features-in-C%23-6-and-VB-14 */ using ...