<!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. IDEA中集成JRebel插件

    下载下面2个插件 jr-ide-intellij-6.4.3_13-16.zip --- 官网的jar(地址:https://plugins.jetbrains.com/plugin/4441-jre ...

  2. Centos6.5安装Mysql5.6.10

    1. 先卸载掉老版本的mysql(linux严格区分大小写,查找的时候加上-i参数,和mysql相关的全部要卸) [root@liuchao ~]# rpm -qa | grep -i mysqlMy ...

  3. jsonp 实现跨域例子

    直接上代码: js: <html> <head> <title>JSONP</title> </head> <script src = ...

  4. Oracle给不同组数据添加顺序

    SELECT DENSE_RANK() OVER(ORDER BY TABLESPACE_NAME),T.* FROM USER_TABLES T;

  5. Codeforces Round #371 (Div. 2) A ，B ， C 水，水，trie树

    A. Meeting of Old Friends time limit per test 1 second memory limit per test 256 megabytes input sta ...

  6. httpClient的post方法使用form格式数据调用接口

    Http使用post调用接口,接口只接受form表单数据格式问题? 这个问题的关键是form表单提交的是数据格式是什么样子的,使用httpClient工具类时Header信息如何写. 会影响解决问题思 ...

  7. pg_stat_activity存储postgresql当前连接个数

    postgres=# \d pg_stat_activity 视观表 "pg_catalog.pg_stat_activity" 栏位 | 型别 | 修饰词------------ ...

  8. jquery自定义window事件

    <body> <a href='https://www.baidu.com/'>百度</a> </body> <script type=" ...

  9. spring boot: Annotation 注解之@Target的用法介绍

    前言 目前,越来越多的架构设计在使用注解,例如spring3.0.struts2等框架.让我们先来看看注解的定义.如下是一段使用了JDK 5 Annotation @Target的代码: @Targe ...

  10. 2017-03-05 CentOS中配置守护服务(Supervisor)监听dotnet core web程序的运行

    我们继续解决上篇博客的问题,我这个人有个毛病,不喜欢遗留什么问题,也不喜欢问题说不明白,具体要怎么解决一定要详尽,因为经常自己遇到问题的时候,去翻别人的博客,就会遇到这样的问题,很苦恼,又说废话了. ...