<!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. 数人云CTO解读Docker 1.12和金融业容器化

    7月29日 数人云 在上海举办金融沙龙,邀请上交所和近二十家来自银行.保险.证券的IT技术专家一同探讨容器技术在金融业中的最佳实践.数人云CTO肖德时在会上将传统金融行业通过容器可以解决的四大问题做了 ...

  2. shell脚本学习之ubuntu删除多余内核

    #!/bin/bash #定期删除内核 #存储命令输出cmd_output=`commands` uname_output=$(uname -r) kernel_output=`dpkg --list ...

  3. hdu 3449 Consumer （依赖01背包）

    题目: 链接:pid=3449">点击打开链接 题意: 思路: dp[i][j]表示前i个箱子装j钱的材料可以得到的最大价值. 代码: #include<iostream> ...

  4. cocos2d-x ios游戏开发初认识(九) 音效、粒子系统与存储

    我们知道.一个游戏少不了声音.一些好听的声音会提起你对游戏的兴趣,当然做好听的声音不是我们要学的,我们的目的是把声音在适当的时候放出来.顺便在这节中会说下简单的粒子系统和文件存储. 一.声音的播放: ...

  5. ADO.NET (二)—— ADO和ADO .NET对照

     ADO.NET (二)-- ADO和ADO .NET对照       我们知道ADO.NET的两大核心组件各自是Data Provider和DataSet.假设说 DataSet是ADO.NET的心 ...

  6. Linux 设备文件的创建和mdev

    引子 本文是嵌入式企鹅圈开篇--<linux字符设备驱动剖析>的姐妹篇,在上述文章里面我们具体描写叙述了字符设备驱动框架涉及的驱动注冊.通过设备文件来訪问驱动等知识.并明白通过device ...

  7. 忽略PyCharm4中特定的警告提示信息

    有一种简单的方式忽略PyCharm4中的警告,光标放在下划线上,a. 等灯泡出现,点击灯泡或者b. 按下Alt和Enter键,选择'Ignore errors like this'. 或者,在设置里更 ...

  8. Core Java(一)

    一. 绪 1.软件:按照特定顺序组织的计算机数据和指令的集合. 软件开发:借助开发工具与计算机语言制作软件 2.计算机语言:用于人与计算机通讯的语言 分为机器语言,汇编语言,高级语言 高级语言分为编译 ...

  9. MyBatis数据持久化（七）多表连接查询

    本节继续以多表连接查询的案例介绍使用resultMap的好处,对于两张以上的表进行关联查询,当我们有选择的从不同表查询所需字段时,使用resultMap是相当方便的.例如我们有两张表,分别为用户表Us ...

  10. （转载）ScratchView

    首页 我的管理 客户端 登录注册 首页 安卓组件中心 安卓代码分享 Swift专区 HTML5移动开发 视频中心 小程序 名称: ScratchView 作者: doliangzhe 来源: gith ...