angularjs1-路由
2024-05-16 02:48:04
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="angular.min.js"></script><script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script><style>.red{ background:red;}.yellow{ background:yellow;}</style></head><body><div ng-app="myApp"><div ng-controller="firstController"><div ng-bind-html="text"></div></div></div><script type="text/javascript">var app = angular.module('myApp',['ngSanitize']);//依赖
app.controller('firstController',['$scope','$interval',function($scope,$interval){$scope.text = '<h1>hello</h1>';//解析html，
}]);</script></body>
</html>
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="angular.min.js"></script><script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script></head><body><div ng-app="myApp"><div class="header"><a href="#div1">第一个div</a><a href="#div2">第二个div</a><a href="#div3">第三个div</a><a href="#content/13/5">点击去内容12</a></div><div ng-view></div></div><script type="text/javascript">var app = angular.module("myApp", ['ngRoute']);app.run(['$rootScope',function($rootScope){$rootScope.$on('$routeChangeStart',function(event,current,pre){console.log(event);// console.log(current);// console.log(pre);
});}]);app.config(['$routeProvider',function($routeProvider){$routeProvider.when('/div1',{templateUrl : '../template1.html',controller : 'div1Controller'}).when('/div2',{template : '<p>这是div2{{text}}</p>',controller : 'div2Controller'}).when('/div3',{template : '<p>这是div3{{text}}</p>',controller : 'div3Controller'}).when('/content/:id/:cateid',{template : '<p>这是content{{id}}</p>',controller : 'div4Controller'}).otherwise({redirectTo : '/div3'});}]);app.controller('div1Controller',function($scope){$scope.text='phonegap中文网 外部页面';});app.controller('div2Controller',function($scope){$scope.text='div2Controller';});app.controller('div3Controller',function($scope){$scope.text='div3Controller';});app.controller('div4Controller',['$scope','$routeParams',function($scope,$routeParams){console.log($routeParams);$scope.id=$routeParams.num;$scope.text='div4Controller';}]);/** app.controller('firstController',function($scope){//$scope.text='phonegap中文网';});* */</script></body>
</html>
<!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']);
m1.config(['$routeProvider',function($routeProvider){$routeProvider.when('/aaa/:num',{template : '<p>首页的内容</p>{{name}}',controller : 'Aaa'}).when('/bbb',{template : '<p>学员的内容</p>{{name}}',controller : 'Bbb'}).when('/ccc',{templateUrl : 'test.html',controller : 'Ccc'}).otherwise({redirectTo : '/aaa'});
}]);
m1.run(['$rootScope',function($rootScope){//run是module初始化的时候，
$rootScope.$on('$routeChangeStart',function(event,current,pre){//on监听触发的事件，
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><a href="" ng-click="$location.path('bbb')">学员</a><a href="" ng-click="$location.path('ccc')">课程</a><div ng-view></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="angular.min.js"></script><script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script></head><body><div ng-app="myApp"><div class="header" ng-controller="firstController"><a ng-click="$location.path('div1')">第一个div</a><a ng-click="$location.path('/div2')">第二个div</a><a href="#div3">第三个div</a><a href="#content/13/5">点击去内容12</a></div><div ng-view></div></div><script type="text/javascript">var app = angular.module("myApp", ['ngRoute']);app.run(['$rootScope',function($rootScope){$rootScope.$on('$routeChangeStart',function(event,current,pre){console.log(event);// console.log(current);// console.log(pre);
});}]);app.config(['$routeProvider',function($routeProvider){$routeProvider.when('/div1',{templateUrl : 'template1.html',controller : 'div1Controller'}).when('/div2',{template : '<p>这是div2{{text}}</p>',controller : 'div2Controller'}).when('/div3',{template : '<p>这是div3{{text}}</p>',controller : 'div3Controller'}).when('/content/:id/:cateid',{template : '<p>这是content{{id}}</p>',controller : 'div4Controller'}).otherwise({redirectTo : '/div1'});}]);app.controller('div1Controller',function($scope){$scope.text='phonegap中文网 外部页面';});app.controller('div2Controller',function($scope){$scope.text='div2Controller';});app.controller('div3Controller',function($scope){$scope.text='div3Controller';});app.controller('div4Controller',['$scope','$routeParams',function($scope,$routeParams){console.log($routeParams);$scope.id=$routeParams.num;$scope.text='div4Controller';}]);app.controller('firstController',function($scope,$location){$scope.$location= $location;$scope.text='phonegap中文网';});</script></body>
</html>
本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/7241442.html，如需转载请自行联系原作者
angularjs1-路由相关推荐
- Angularjs1.x 中的 service,factory,provider,constant,value
了解 Angularjs1.x 中的 service,factory,provider,constant,value 的应用场景及区别 不管 service , factory 还是 provider ...
- javascript基础修炼——前端路由的基本原理
前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果. [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十 ...
- angularjs1.6.x实例教程
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zeping891103/article/details/77446544 AngularJS是一款优 ...
- RabbitMQ 入门系列（2）— 生产者、消费者、信道、代理、队列、交换器、路由键、绑定、交换器
本系列是「RabbitMQ实战:高效部署分布式消息队列」和 「RabbitMQ实战指南」书籍的读书笔记. RabbitMQ 中重要概念 1. 生产者 生产者(producer)创建消息,然后发送到代理 ...
- 前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...
- 发送快递：配置静态路由
背景 基础组网,比如现在要实现相互通信,通过两台计算机来检测是否互通,但是它们中间通过一些路由器相互连接,这个时候,你要考虑,怎么配置这些路由器,包括给pc配地址,给路由器配地址,怎么定义这些网段! ...
- SpringCloud Alibaba微服务实战(七) - 路由网关(Gateway)全局过滤
说在前面 全局过滤器作用于所有的路由,不需要单独配置,我们可以用它来实现很多统一化处理的业务需求,比如权限认证,IP 访问限制,监控,限流等等. 创建路由网关(Gateway)启动服务cloud-ac ...
- SpringCloud Alibaba微服务实战(六) - 路由网关(Gateway)
什么是 Spring Cloud Gateway? Spring Cloud Gateway 是 Spring 官方基于 Spring 5.0,Spring Boot 2.0 和 Project Re ...
- 【微服务架构】SpringCloud之路由网关(zuul)
什么是zuul zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul 在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架.Zu ...
- flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...
最新文章
- 谷歌无人车十年记：理想背后的骨感现实 | 厚势汽车
- python创建文件夹_Python学习第71课-本地建立repository仓库
- 数据结构与算法09 之图
- Java中执行存储过程和函数(web基础学习笔记十四)
- tensor flow lstm 图像 一条直线_【开源计划】图像配准中变形操作（Warp）的pytorch实现...
- 2019hdu多校1
- JAVA读取2g数据的速度_Java 读取大容量excel
- 线下实战（这次包含北京）
- 动态规划 —— 背包问题 P01 —— 0-1背包
- Keil C51大工程建立，模块化编程
- 黑盒白盒软件测试报告,黑盒白盒测试报告结果_白盒测试黑盒测试方法_软件黑盒和白盒测试...
- HeartBeat简单介绍和基本作用：
- gwas snp 和_GWAS，SNP，和疾病
- python str转为list,dict,tuple等 eval,exec,
- 使用三防漆的安全说明
- paip.重装系统后svn服务器修复
- qq邮箱smtp服务器imap,如何配置电子邮件客户端使用IMAP（QQ邮箱账户） 你需要学习了...
- iQOO 10系列来袭 OriginOS原系统强化手机体验
- 02-表格基本格式以及各个标签的属性、boder/cellpadding/cellspacing的区分、th标签、caption标签
- 谷歌扩展插件官方下载地址