<!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. C++使用命名空间中成员的三种方式

    通过简单的代码来介绍使用命名空间中成员的三种方式(我们最常用到的命名空间是是标准库std,下面的命名空间都以std为例): 使用作用域符:: #include<iostream> int ...

  2. nginx 反向代理配置之---可配置多域名请求

    配置文件如下: server { listen 80; server_name ngin服务器所对应的的域名; error_log /data/logs/nginx/mainsite.error.lo ...

  3. POJ2741 Colored Cubes

    Description There are several colored cubes. All of them are of the same size but they may be colore ...

  4. 3DES双倍长加密

    import java.security.SecureRandom; import javax.crypto.Cipher; import javax.crypto.SecretKey; import ...

  5. Asp.net WebAPI 使用流下载文件注意事项

    public HttpResponseMessage Post(string version, string environment, string filetype) { var path = @& ...

  6. LINQ(数据查询)

    如果只有空的构造函数,想要对字段进行初始化,可以直接在构造函数后面加上{属性名=值,属性名=值};属性与属性之间用,分割开 //查询所有武学级别大于8的武林高手 //var res = new Lis ...

  7. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

  8. java.net.SocketException: No buffer space available 异常

    http://stackoverflow.com/questions/10088363/java-net-socketexception-no-buffer-space-available-maxim ...

  9. spring MVC multipart处理文件上传

    在开发Web应用程序时比较常见的功能之一,就是允许用户利用multipart请求将本地文件上传到服务器,而这正是Grails的坚固基石——Spring MVC其中的一个优势.Spring通过对Serv ...

  10. linux查看网络链接状况命令netstat

    linux查看网络链接状况命令 netstat 参数如下: -a 显示所有socket,包括正在监听的. -c 每隔1秒就重新显示一遍,直到用户中断它. -i 显示所有网络接口的信息,格式同“ifco ...