首页
所有分类
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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
JavaScript常用脚本汇总（一）
Mar 04 Javascript
基于Angularjs实现分页功能
May 30 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
详解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
ICF-F10(1) CPU(2) 天梯图(1) 德生G88(1) SRF-40W(1) PR-D3L(1) 纸巾盒(1) AE3805(1) 德生1994(1) ICF-SW100(1)
You might like
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
详解Node.js：events事件模块
2016/11/24 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
Python实现快速计算词频功能示例
2018/06/25 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
求∏的近似值，直到最后一项的绝对值小于指定的数
2016/02/12 面试题
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
店长职务说明书
2014/02/04 职场文书
2014年医务科工作总结
2014/12/18 职场文书
明星邀请函
2015/02/02 职场文书
庆七一主持词
2015/06/29 职场文书
丧事主持词
2015/07/02 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
分享python函数常见关键字
2022/04/26 Python