<!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. [BLE--Link Layer]设备蓝牙地址

    简述 不论什么网络设备而言,都会有自己独特的一个MAC地址,不然在设备量较大的情况下非常可能造成通信的混乱.蓝牙是无线通信中使用非常广泛的技术.当然其蓝牙地址也是相当的重要的了. 蓝牙地址简述 种类划 ...

  2. githubclient配置方法简述

    /*********************************************************** * Author : Samson * Date : 08/15/2015 * ...

  3. Cocos2d-x可以实现的动画效果

    动作(Actions)move移动:moveto/moveby 从一个位置移动到另外一个位置 从一个位置移动多少数量级rotate旋转:rotateto/rotateby 从一个角度旋转到另外一个角度 ...

  4. ES线程池设置

    每个Elasticsearch节点内部都维护着多个线程池,如index.search.get.bulk等,用户可以修改线程池的类型和大小,线程池默认大小跟CPU逻辑一致 一.查看当前线程组状态 cur ...

  5. ubuntu12.04下NFS链接开发板并测试交叉编译的第一个应用

    思路:配置网络->安装NFS->配置NFS->挂载NFS服务->Down文件执行.Okay lets go! 配置网络: 在配置网络之前,首先咱得搞定与开发板的交互工作,那么这 ...

  6. （四）Hystrix容错保护

    Feign默认是整合了Ribbon和Hystrix这两个框架,所以代码我们在上一篇的基础上进行修改,启动Eureka,service-hello,Feign 所谓的熔断机制和日常生活中见到电路保险丝是 ...

  7. xBIM 基础12 WeXplorer xViewer的导航、相机、剖切、隐藏等操作

    系列目录    [已更新最新开发文章,点击查看详细]  本篇将学习xViewer的导航,剪切和隐藏.这应该足以使用户能够通过所有缩放,平移,轨道运行和隐藏可能的障碍物来检查建筑物内部.点击这里可以看到 ...

  8. C++如何调用C#编写的　DLL

    由于C#编绎出来的DLL不是计算机所能直接识别的二进制指令码,需要CLS进行再解释,说到这,我想有些朋友应该知道C#项目需要引用C++编写的DLL时,可以直接引用DLLMPORT来实现调用,而反向的话 ...

  9. MetaSploit攻击实例讲解------攻击445端口漏洞（kali linux 2016.2(rolling)）（详细）

    不多说,直接上干货! 大家,相信最近的这个事件,对于445端口已经是非常的小心了.勒索病毒 445端口是一个毁誉参半的端口,有了它我们可以在局域网中轻松访问各种共享文件夹或共享打印机,但也正是因为有了 ...

  10. SPSS学习小记

    2013年1月8日 最近一直在SPSS中处理数据,涉及到函数部分,不是太懂,特记录于此,以便翻阅.   SPSS判断字符变量中是否含有某字符串的表示方式:  (INDEX(url,'ad')>0 ...