首页
所有分类
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 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
JavaScript的==运算详解
Jul 20 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
javascript的this关键字详解
May 20 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
原生js+ajax分页组件
Jan 30 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
委托书(259) 公证书(45) 担保书(46) 主持词(345) 竞聘书(31) 检举信(8) 聘任书(31) 意向书(73) 承诺书(369) 广告词(105)
You might like
php.ini中文版
2006/10/09 PHP
php 动态添加记录
2009/03/10 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP异常处理浅析
2015/05/12 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
js 作用域和变量详解
2017/02/16 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
2019/04/17 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
Python入门篇之对象类型
2014/10/17 Python
在Python的web框架中配置app的教程
2015/04/30 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
纽约JewelryAffairs珠宝店：精细金银时尚首饰
2017/02/05 全球购物
美国伴娘礼服商店：Evening Collective
2019/10/07 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2015年植树节活动总结
2015/02/06 职场文书
寒假生活随笔
2015/08/15 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle