<!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. IE6浏览器不支持固定定位（position：fixed）解决方案(转)

    IE6浏览器不支持固定定位(position:fixed)解决方案   来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...

  2. 使用excel进行数据挖掘（3）----类别检測

    使用excel进行数据挖掘(3)----类别检測 在配置环境后,能够使用excel进行数据挖掘. 环境配置问题可參阅: http://blog.csdn.net/xinxing__8185/artic ...

  3. HDU 2421

    由算术基本定理N=p1^e1*p2^e2....ps^es,可知一个素的因子个数为(e1+1)*(e2+1)*...*(es+1). 而N的一人因子必定也有n=p1^k1*p2^k2....*ps^k ...

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

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

  5. iOS UI10_带分区的省市区

    // // MainViewController.m // UI10_带分区的省市区 // // Created by dllo on 15/8/11. // Copyright (c) 2015年 ...

  6. leetcode题解||ZigZag Conversion问题

    problem: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of r ...

  7. Android ImageView 不显示JPEG图片 及 Android Studio中怎样引用图片资源

    Android ImageView 不显示JPEG图片 今天在写一个小实例,ImageView在xml里面设置的是INVISIBLE,在代码里须要设置成setVisibility(View.VISIB ...

  8. nyoj--90--整数划分(母函数)

    整数划分 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 将正整数n表示成一系列正整数之和:n=n1+n2+-+nk,  其中n1≥n2≥-≥nk≥1,k≥1.  正整数 ...

  9. xBIM 基础10 WeXplorer 浏览器检查

    系列目录    [已更新最新开发文章,点击查看详细]  在上一篇 <xBIM基础 09 WeXplorer 基本应用> 已经提到,查看器不会在所有浏览器的所有设备上运行.为了操作效率和简单 ...

  10. 将hexo的评论系统由gitment改为Valine

    title: 将hexo的评论系统由gitment改为Valine toc: false date: 2018-09-13 15:10:56 categories: methods tags: hex ...