<!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. maven 简介 —— maven权威指南学习笔记（一）

    maven是什么?有什么用? Maven是一个项目管理工具,它包含了 一个项目对象模型 (Project Object Model), 一组标准集合, 一个项目生命周期(ProjectLifecycl ...

  2. vim 乱码问题的方法参考

    linux 中设置当前用户的系统默认编码为 UTF-8 格式解决 vim 乱码问题的方法参考  任侠  2013-05-02 11:58  电脑基础  抢沙发  13,732 views  在使用 l ...

  3. DATEDIFF 的用法

    DECLARE @date DATETIME = '2017-12-26 00:00:00';DECLARE @date2 DATETIME = DATEADD(DAY, 1, @date);DECL ...

  4. MySQL性能优化-内存参数配置

    Mysql对于内存的使用,可以分为两类,一类是我们无法通过配置参数来配置的,如Mysql服务器运行.解析.查询以及内部管理所消耗的内存:另一类如缓冲池所用的内存等. Mysql内存参数的配置及重要,设 ...

  5. JQuery小知识点

    //get() : 就是把JQ转成原生JS,可以让通过jquery获得元素使用JS的innerHTML方法. $(function(){ //document.getElementById('div1 ...

  6. Windods7+Anaconda+Tensorflow安装步骤

    1.下载及安装Anaconda Anaconda是python科学计算的集成.下载Anaconda,下载地址:http://continuum.io/downloads. 由于tensorflow目前 ...

  7. linux--svn checkout

    svn --username=yourname co svn_path local_path

  8. 字典：dict.c/dict.h

    Redis 源码分析(1):字典和哈希表(dict.c 和 dict.h)http://huangz.iteye.com/blog/1455808两个点:字典结构的运作流程哈希表的渐进式 rehash ...

  9. spring boot 基础篇 -- 阿里多数据源

    这块是比较基础的配置,阿里数据库配置还是比较好用的,并且可以用来监控数据源的情况.废话不多说,下面看代码. 基于maven项目,在pom.xml中添加引用: <dependency> &l ...

  10. Handsontable-一款仿 Excel效果的表格插件使用总结 96

    最近在做一个关于报表管理的项目,发现了一款很好用的jQuery插件-Handsontable.它真的特别给力,在 Excel 中可进行的操作,你几乎都可以在网页中做到,如拖动复制.Ctrl+C .Ct ...