<!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']);//引入插件angular-route.min.js

m1.config(['$routeProvider',function($routeProvider){//通过供应商初始化配置

    $routeProvider

        .when('/aaa/:int',{//int对应123，456

            template : '<p>首页的内容</p>{{name}}', //模版加入到ng-view

            controller : 'Aaa'//改变name的值

        })

        .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){//routeChangeStart是ngRoute切换之前执行的，

        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>  //$location.path切换路径，$location对应controller里面的$scope.$location

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

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

   <div ng-view></div>//切换布局的主题

</div>

</body>

</html>

angularjs 路由 ngRoute tab切换的更多相关文章

  1. AngularJS 路由：ng-route 与 ui-router

    AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL. 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化, ...

  2. AngularJS学习笔记(三) 单页面webApp和路由(ng-route)

    就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关 ...

  3. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建：(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  4. vue路由+vue-cli实现tab切换

    第一步:搭建环境 安装vue-cli cnpm install -g vue-cli安装vue-router cnpm install -g vue-router使用vue-cli初始化项目 vue ...

  5. angularjs 路由切换回到顶部

    angularjs路由切换  页面不会回到顶部 问题: 在angularjs中  ui-sref或者$state.go(),通过路由切换页面,发现新打开的路由页面仍然停留在上一次的路由页面访问的位置. ...

  6. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  7. [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程

    这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...

  8. angularjs 路由机制

    前言 AngularJS路由主要有内置的ngRoute和一个基于ngRoute开发的第三方路由模块ui-router,内置的ngRoute有时满足开发需求,使用ui-router可以解决很多原生ngR ...

  9. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

随机推荐

  1. 重启rsyslog服务时出现问题（误删/var/log/messages解决方案）

    今天修改了/etc/rsyslog.conf中的内容后,想着要通过systemctl restart rsyslog重启服务,但是执行完命令后,总感觉/etc/rsyslog.conf中修改的内容没有 ...

  2. com.alibaba.fastjson.JSONPathException: expect '], but 'y'

    今天遇到这样的一个错误 网上查找了各种资料,终于找到了报错的原因: String dataType = (String) JSONPath.eval(dataset.getSchema(), &quo ...

  3. log4j.propertie配置具体解释

    1.log4j.rootCategory=INFO, stdout , R 此句为将等级为INFO的日志信息输出到stdout和R这两个目的地,stdout和R的定义在以下的代码,能够随意起名.等级可 ...

  4. 【Java】【Flume】Flume-NG启动过程源代码分析（一）

    从bin/flume 这个shell脚本能够看到Flume的起始于org.apache.flume.node.Application类,这是flume的main函数所在. main方法首先会先解析sh ...

  5. linux数据库升级

    转自:老左博客:http://www.laozuo.org/6145.html 老左今天有在帮朋友的博客搬迁到另外一台VPS主机环境,其环境采用的是LLSMP架构的,原先的服务器采用的是LNMP网站环 ...

  6. hdu1276（士兵队列训练问题） java集合水过

    点击打开链接 有人说这题属于栈或者队列,个人认为说集合应该比較准确点. Problem Description 某部队进行新兵队列训练,将新兵从一開始按顺序依次编号.并排成一行横队,训练的规则例如以下 ...

  7. legend---十一、thinkphp事务中if($ans1&&$ans2){}else{}方式和try{}catch{}方式事务操作的区别在哪里

    legend---十一.thinkphp事务中if($ans1&&$ans2){}else{}方式和try{}catch{}方式事务操作的区别在哪里 一.总结 一句话总结:执行的条件其 ...

  8. sc.textFile("file:///home/spark/data.txt") Input path does not exist解决方法——submit 加参数 --master local 即可解决

    use this val data = sc.textFile("/home/spark/data.txt") this should work and set master as ...

  9. myBatis中Invalid bound statement (not found)错误

    环境:Idea.ssm.maven 由于使用maven的原因,maven不会扫描到mapper的xml文件所以会出现此类问题. 每次走到mapper方法时就抛异常:Invalid bound stat ...

  10. P2742 [USACO5.1]圈奶牛Fencing the Cows

    题目描述 农夫约翰想要建造一个围栏用来围住他的奶牛,可是他资金匮乏.他建造的围栏必须包括他的奶牛喜欢吃草的所有地点.对于给出的这些地点的坐标,计算最短的能够围住这些点的围栏的长度. 输入输出格式 输入 ...