<!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. springmvc拦截器基本使用

    1.HandlerExecutionChain是一个执行链,当用户的请求到达DispatcherServlet的时候,DispatcherServlet会到HandlerMapping中查找对应的Ha ...

  2. 【P1274】魔术数字游戏（搜索+剪枝+模拟）

    做完了这个题的我一口老血喷在屏幕上... 这个题难度不高(~~胡扯~~),就是爆搜就可以了,然而..判断条件灰常多,剪枝也就非常多..然而,这些判断条件又不得不必须满足,所以也就十分容易错... 说一 ...

  3. winform获取文件路径

    1.取得控制台应用程序的根目录方法     方法1.Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径     方法2.AppDomain.CurrentD ...

  4. 循环插入一条数据的sql写法

    DECLARE @i INTSET @i = 1WHILE @i > 0 BEGIN DECLARE @TransportFormMstID BIGINT; DECLARE @TradeOrde ...

  5. BZOJ3243/UOJ121 [Noi2013]向量内积

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  6. IntelliJ Idea 免费激活方法免激活码

    1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...

  7. js桥接模式

    桥接模式(Bridge),将抽象部分与它的实现部分分离,使它们都可以独立地变化. 抽象化和实现部分在一起,桥接模式的目的就是使两者分离,根据面向对象的封装变化的原则,我们可以把实现部分的变化封装到另外 ...

  8. review19

    StringBuffer类 String类创建的字符串对象是不可修改的,也就是说,String字符串不能修改.删除或替换字符串中的饿某个字符,即String对象一旦创建,那么实体是不可以再发生变化的. ...

  9. 路由器分配的IP地址

    在IP地址范围内,一部分地址将保留作为私人IP地址空间,专门用于内部局域网使用,这些地址如下表: A类 10.0.0.0-10.255.255.255 网络数:1 B类 172.16.0.0-172. ...

  10. html5学习笔记（audio）

    来源于<HTML5高级程序设计> audio api <audio controls> controls告诉浏览器显示播放控件 不指定 type 浏览器自解 oggMP3 ty ...