首页
所有分类
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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 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
国际空间站(1) 夸克(1) 对撞机(1) 太空(1) 粒子对撞机(1) 界面设计(1) 塑料(1) 人造肉(1) 天问一号(1) 酶(1)
You might like
php htmlspecialchars加强版
2010/02/16 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
详解thinkphp5+swoole实现异步邮件群发（SMTP方式）
2017/10/13 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
AJAX异步从优酷专辑中采集所有视频及信息（JavaScript代码）
2010/11/20 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
在Javascript操作JSON对象，增加 删除 修改的简单实现
2016/06/02 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
Jquery Easyui日历组件Calender使用详解（23）
2016/12/18 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
react-router实现按需加载
2017/05/09 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python编程之Re模块下的函数介绍
2017/10/28 Python
python实现自主查询实时天气
2018/06/22 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
植物选择：Botanic Choice
2017/02/15 全球购物
Shopee马来西亚：随拍即卖，最佳行动电商拍卖平台
2017/06/05 全球购物
NFL欧洲商店(德国)：NFL Europe Shop DE
2018/11/03 全球购物
《云雀的心愿》教学反思
2014/02/25 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
水电站项目建议书
2014/05/12 职场文书
学校就业推荐信范文
2014/05/19 职场文书
中层干部培训方案
2014/06/16 职场文书
作风建设整改方案
2014/10/27 职场文书