首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Angular路由简单学习

Posted in Javascript onDecember 26, 2016

现在非常流行单页面应用，传统都是通过ajax请求数据，前端拿到数据渲染到页面，这种无刷新的视图切换非常棒！但是致命的缺点就是刷新後无法保持原来的视图，解决此问题的一个方法是使用 hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。

现在开始介绍angular的$route！

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
 <a href="#aaa">首页</a>
 <a href="#bbb">内容</a>
 <a href="#ccc">标题</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function($routeProvider){
 $routeProvider.when('/aaa',{
  template : '<h1>AAA</h1>'
 }).when('/bbb',{
  template : '<h1>BBB</h1>'
 }).when('/ccc',{
  template : '<h1>CCC</h1>'
 }).otherwise({ //默认哈希值，哈希值出现错误也可以执行
  redirectTo : '/aaa'
 });
}]);
m1.controller('Aaa',['$scope',function($scope){

}]);
</script>
</body>
</html>

上面的例子很简单， 除了用template之外还可以用templateUrl引入html的模板文件。

Angular路由简单学习

 在when传入控制器的指向，实现不同的页面显示不同的数据。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
 <a href="#aaa">首页</a>
 <a href="#bbb">内容</a>
 <a href="#ccc">标题</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function($routeProvider){
 $routeProvider.when('/aaa',{
  template : '<h1>AAA</h1>{{name}}',
  controller : 'Aaa' //控制器指向
 }).when('/bbb',{
  template : '<h1>BBB</h1>{{name}}',
  controller : 'Bbb'
 }).when('/ccc',{
  template : '<h1>CCC</h1>{{name}}',
  controller : 'Ccc'
 }).otherwise({
  redirectTo : '/aaa'
 });
}]);
m1.controller('Aaa',['$scope',function($scope){
 $scope.name = 'xiecg-Aaa';
}]);
m1.controller('Bbb',['$scope',function($scope){
 $scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
 $scope.name = 'xiecg-Ccc';
}]);

</script>
</body>
</html>
 

以事件的方式映射路由页面。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
 <a href="javascript:void(0);" ng-click="$location.path('aaa')">首页</a>
 <a href="javascript:void(0);" ng-click="$location.path('bbb')">内容</a>
 <a href="javascript:void(0);" ng-click="$location.path('ccc')">标题</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function($routeProvider){
 $routeProvider.when('/aaa',{
  template : '<h1>AAA</h1>{{name}}',
  controller : 'Aaa' //控制器指向
 }).when('/bbb',{
  template : '<h1>BBB</h1>{{name}}',
  controller : 'Bbb'
 }).when('/ccc',{
  template : '<h1>CCC</h1>{{name}}',
  controller : 'Ccc'
 }).otherwise({
  redirectTo : '/aaa'
 });
}]);
m1.controller('Aaa',['$scope','$location',function($scope,$location){
 $scope.name = 'xiecg-Aaa';
 $scope.$location = $location;
}]);
m1.controller('Bbb',['$scope',function($scope){
 $scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
 $scope.name = 'xiecg-Ccc';
}]);

</script>
</body>
</html>
  

项目更复杂，页面相同(首页&index)，数据不同，需要对url进行传参。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
 <a href="javascript:void(0);" ng-click="$location.path('aaa/123')">首页</a>
 <a href="javascript:void(0);" ng-click="$location.path('bbb')">内容</a>
 <a href="javascript:void(0);" ng-click="$location.path('ccc')">标题</a>
 <a href="javascript:void(0);" ng-click="$location.path('aaa/456')">index</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
 $routeProvider.when('/aaa/:num',{
  template : '<h1>AAA</h1>{{name}}',
  controller : 'Aaa'
 }).when('/bbb',{
  template : '<h1>BBB</h1>{{name}}',
  controller : 'Bbb'
 }).when('/ccc',{
  template : '<h1>CCC</h1>{{name}}',
  controller : 'Ccc'
 }).otherwise({
  redirectTo : '/aaa/:num'
 });
}]);

m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
 $scope.name = 'xiecg-Aaa';
 $scope.$location = $location;
 console.log($routeParams); //不同的数据
}]);
m1.controller('Bbb',['$scope',function($scope){
 $scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
 $scope.name = 'xiecg-Ccc';
}]);
</script>
</body>
</html>

Angular路由简单学习

路由的事件监听。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
 <a href="#aaa">首页</a>
 <a href="#bbb">内容</a>
 <a href="#ccc">标题</a>
 <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);

m1.run(['$rootScope',function($rootScope){
 //路由切换之前触发的事件
 $rootScope.$on('$routeChangeStart',function(event,current,pre){
  console.log(event);  //事件对象
  console.log(current); //路径对应的数据值
  console.log(pre);  //上一个路径
 });
}]);

m1.config(['$routeProvider',function($routeProvider){
 $routeProvider.when('/aaa',{
  template : '<h1>AAA</h1>'
  //templateUrl : 'temp.html'
 }).when('/bbb',{
  template : '<h1>BBB</h1>'
 }).when('/ccc',{
  template : '<h1>CCC</h1>'
 }).otherwise({ //默认哈希值，哈希值出现错误也可以执行
  redirectTo : '/aaa'
 });
}]);
m1.controller('Aaa',['$scope',function($scope){

}]);

</script>
</body>
</html>
 

补充：angular事件的传播机制。

<div ng-controller="Aaa">
 {{count}}
 <div ng-controller="Aaa" ng-click="$emit('myEvent')">
  {{count}}
  <div ng-controller="Aaa">
   {{count}}
  </div>
 </div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){
 $scope.count = 0;
 $scope.$on('myEvent',function(e){
  //console.log(e.targetScope);  //当前的
  //console.log(e.currentScope); //目标的
  //console.log(e.name);   //事件名
  //e.stopPropagation();   //阻止冒泡
  $scope.count++;
 });
}]);
</script>

前面嵌套了三个controller，我们在中间的controller上绑定了click事件，使用$emit点击的时候，上面的controller也会触发事件。

Angular路由简单学习

如果是$broadcast点击就是往下传播。

Angular路由简单学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Angular路由简单学习

- Author -

小谢53

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
javascript中的隐式调用
Feb 10 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 #Javascript
Angular工具方法学习
Dec 26 #Javascript
angular双向绑定模拟探索
Dec 26 #Javascript
jquery Banner轮播选项卡
Dec 26 #Javascript
Javascript中常用类型的格式化方法小结
Dec 26 #Javascript
Angular的自定义指令以及实例
Dec 26 #Javascript
如何提高javascript加载速度
Dec 26 #Javascript
比利时购物网站(33) 意大利购物网站(128) 印尼购物网站(37) 阿根廷购物网站(9) 台湾购物网站(77) 澳大利亚购物网站(309) 法国购物网站(144) 肯尼亚购物网站(2) 丹麦购物网站(22) 挪威购物网站(7)
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
[05:13]TI4 中国战队 机场出征！！
2014/07/07 DOTA
[01:10]为家乡而战！完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
python 动态加载的实现方法
2017/12/22 Python
VIVOBAREFOOT赤脚鞋：让您的脚做自然的事情
2017/06/01 全球购物
苹果Mac升级：MacSales.com
2017/11/20 全球购物
英国领先的餐饮折扣俱乐部：Gourmet Society
2020/07/26 全球购物
Java中有几种类型的流？JDK为每种类型的流提供了一些抽象类以供继承，请说出他们分别是哪些类
2012/02/06 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
高中生活自我鉴定
2014/01/18 职场文书
测试工程师职业规划书
2014/02/06 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
商场促销活动总结
2014/07/10 职场文书
中层干部考核评语
2015/01/04 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android