开发者社区> 范大脚脚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

angularjs 路由 ngRoute tab切换

简介:
+关注继续查看
复制代码
<!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>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5747619.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
springcloud 微服务日志写入kafka
springcloud 微服务日志写入kafka
101 0
金庸和古龙,Netweaver和微服务,以及SAP Hybris Revenue Cloud
金庸和古龙,Netweaver和微服务,以及SAP Hybris Revenue Cloud
25 0
第四十四章 微服务CICD(6)- gitlab + jenkins + docker + k8s
在开发机开发代码后提交到gitlab之后通过webhook插件触发jenkins进行构建,jenkins将代码打成docker镜像,push到docker-registry之后将在k8s-master上执行rc、service的创建,进而创建Pod,从私服拉取镜像,根据该镜像启动容器 1 api.
2287 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载