<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

<script>

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function ($routeProvider){

    $routeProvider

    .when('/aaa',{

        template:'<p>aaaaaaaaaaaa</p>'

    }).when('/bbb',{

        template:'<p>bbbbbbbbbbb</p>'

    }).when('/ccc',{

        template:'<p>cccccccccccccc</p>'

    })

}])

m1.controller('Aaa',['$scope',function ($scope){

}])

</script>

</head>

<body>

<div ng-controller="Aaa">

   <a href="#aaa">index</a>

   <a href="#bbb">222222</a>

   <a href="#ccc">33333</a>

   <div ng-view></div>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

<script>

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function ($routeProvider){

    $routeProvider

    .when('/aaa',{

        template:'<p>aaaaaaaaaaaa</p>'

    }).when('/bbb',{

        template:'<p>bbbbbbbbbbb</p>'

    }).when('/ccc',{

        template:'<p>cccccccccccccc</p>'

    })

}])

m1.controller('Aaa',['$scope','$location',function ($scope,$location){

    $scope.$location = $location;

}])

</script>

</head>

<body>

<div ng-controller="Aaa">

   <a href="" ng-click="$location.path('aaa')">index</a>

   <a href="" ng-click="$location.path('bbb')">222222</a>

   <a href="" ng-click="$location.path('ccc')">33333</a>

   <div ng-view></div>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

<script>

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function($routeProvider){

    $routeProvider

        .when('/aaa/:num',{

            template : '<p>首页的内容</p>{{name}}',

            controller : 'Aaa'

        })

        .when('/bbb',{

            template : '<p>学员的内容</p>{{name}}',

            controller : 'Bbb'

        })

        .when('/ccc',{

            template : '<p>课程的内容</p>{{name}}',

            controller : 'Ccc'

        })

        .otherwise({

            redirectTo : '/aaa'

        });

}]);

m1.run(['$rootScope',function($rootScope){

    $rootScope.$on('$routeChangeStart',function(event,current,pre){

        console.log(event);

        console.log(current);

        console.log(pre);

    });

}]);

m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){

    $scope.name = 'hello';

    $scope.$location = $location;

    console.log( $routeParams );

}]);

m1.controller('Bbb',['$scope',function($scope){

    $scope.name = 'hi';

}]);

m1.controller('Ccc',['$scope',function($scope){

    $scope.name = '你好';

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

   <a href="" ng-click="$location.path('aaa/123')">首页</a>

   <a href="" ng-click="$location.path('bbb')">学员</a>

   <a href="" ng-click="$location.path('aaa/456')">课程</a>

   <div ng-view></div>

</div>

</body>

</html>

Angular 学习笔记——$rounte的更多相关文章

  1. angular 学习笔记

    每天进步一点点,学习笔记 笔记来自  angular权威指南 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记. 而按钮标签则完全忽略 hr e f 属性,并不 ...

  2. angular学习笔记

    1.forEach      arr:参数是key,index json:与jquery相反,参数是value,key2.str-->json    JSON.parse()       ang ...

  3. angular学习笔记(3)

    一.angular的核心 1.组件 2.指令 3.服务 4.依赖注入

  4. angular学习笔记(2)

    1.angular可观察对象 2.angular绑定方式 3.angular模板 4.angular生命周期 5.angular组件通信

  5. Angular 学习笔记——$http

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  6. Log4j简单学习笔记

    log4j结构图: 结构图展现出了log4j的主结构.logger:表示记录器,即数据来源:appender:输出源,即输出方式(如:控制台.文件...)layout:输出布局 Logger机滤器:常 ...

  7. angular学习资源

    angular学习资源   angularjs库: https://developers.google.com/speed/libraries/devguide?hl=zh-CN#angularjs ...

  8. 小波说雨燕 第三季 构建 swift UI 之 UI组件集－视图集（六）Picker View视图 学习笔记

    想对PickerView进行操作,只能在代码中操作. 下面 ,再添加三个label组件,然后将所有组件配置到代码中(看代码),然后要实现对PickerView的操作,就要实现它的DataSource协 ...

  9. DSP bootloader学习笔记1

    DSP bootloader学习笔记1 彭会锋 参考: TMS320F28xx DSP中内部Flash的应用研究 http://wenku.baidu.com/view/83e9837931b765c ...

随机推荐

  1. 转：CentOS 6.5 nginx

    CentOS 6.5安装及简单配置Nginx 一.准备事项 (1) 因为nginx需要访问80端口所以请先关闭或者开放防火墙端口,和selinux. 参考命令 关闭防火墙: [root@local ~ ...

  2. MySQL的菜鸟级操作

    windows下启动和关闭mysql 启动(windows): 在命令行下,进入到mysql安装路径的bin文件夹下执行:net start mysql 关闭(windows): 在启动的情况下执行: ...

  3. iframe操作(跨域解决等)

    note:当页面内嵌入一个iframe实际上是在dom上新建了一个新的完整的window对象 iframe中取得主窗体 window.top (顶级窗口的window对象) window.parent ...

  4. 部分浏览器上a标签包裹的dom元素显示不正常

    在苹果和部分安卓机上出现,pc端和chrome浏览器响应式设计里怎么样也不会出现的访问后a标签包裹的dom元素显示不正常a标签内的hr元素颜色显示不正常hr水平线的颜色被 bootstrap的css的 ...

  5. 洛谷T8116 密码

    T8116 密码 题目描述 YJC把核弹发射密码忘掉了……其实是密码被加密了,但是YJC不会解密.密码由n个数字组成,第i个数字被加密成了如下形式:第k小的满足(2^L)|(P-1)且P为质数的P.Y ...

  6. jQuery选择器总结(重要)

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  7. UVA 10079 Pizze Cutting

    题意:N条直线最多把平面分成几个部分 ans=1+(N+1)*N/2; 直线数量 1 2 3 4 …………n把平面分成的块数 2 4 7 11 1+1 1+1+2 1+1+2+3 1+1+2+3+4 ...

  8. C# 获取农历日期

    //C# 获取农历日期 ///<summary> /// 实例化一个 ChineseLunisolarCalendar ///</summary> private static ...

  9. javascript原型理解一种

    http://www.jianshu.com/p/15ac7393bc1f 这个系列值得好好学习的.. // 声明构造函数 function Person(name, age) { this.name ...

  10. 大数据技术之_16_Scala学习_09_函数式编程-高级

    第十三章 函数式编程-高级13.1 偏函数(partial function)13.1.1 提出一个需求,引出思考13.1.2 解决方式-filter + map 返回新的集合13.1.3 解决方式- ...