AngularJS内建服务$location及其功能详解


Posted in Javascript onJuly 01, 2016

在学习AngularJS的过程中感觉到,通过一次性从服务端的数据库获取信息,在前端进行分页,这是一种比较可取的方式。因为它节省了前后端的通信负载,把更多的显示方面的任务交给前端处理。

此内容分为两个部分,第一部分给大家简单介绍一下AngularJS的内建服务$location及其功能;第二部分通过一个比较完整的综合实例来实现分页显示数据库信息的效果。

在做angularJS的Mutilpe View & Route 的工作时,感觉到应该更加深入的了解一下angularJS的内建的服务&location,因为这个内建的服务于浏览器的URL的操作息息相关,感觉如果处理好了这个服务,那么对日后进行页面的翻页处理会很有帮助。

下面就是我的一些小小的实验,以及一些心得体会,都是用白话文写的,可能不是那么的专业,但是希望对大家理解angularJS的一些概念有所帮助。

这个&location是作为一个服务(service),以依赖注入(dependency injection)的方式作为控制器的返回函数的参数使用。下面就以一个实例来解释这个服务的使用。

Section 1:获取URL信息

&location提供了一些个getter和setter方法,比如absUrl,path,protocol,host,port。具体的解释就是,这些都是&location提供的关于链接地址函数的函数名,如果这些函数在使用时不传入任何参数,则表示获取当前的url信息;如果传入一些参数,则表示设置当前浏览器里的url信息。

实例 1

<!DOCTYPE html>
<html ng-app="LocationApp">
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body ng-controller="LocationController">
<p>absUrl----------{{absUrl}}</p>

<p>path------------{{path}}</p>

<p>protocol--------{{protocol}}</p>

<p>host------------{{host}}</p>

<p>port------------{{port}}</p>
<script src="angular.js"></script>
<script>
 var LocationApp = angular.module('LocationApp', []);
 LocationApp.controller('LocationController', ['$scope', '$location', function ($scope, $location) {
  $scope.absUrl = $location.absUrl();
  $scope.path = $location.path();
  $scope.protocol = $location.protocol();
  $scope.host = $location.host();
  $scope.port = $location.port();
 }]);
</script>
</body>
</html>

AngularJS内建服务$location及其功能详解

从截图能够明显的看出,$location这个服务提供的getter方法可以很方便的获取l浏览器当前的url信息。

细心的同学可能已经看到了,这个path怎么没有值呢?
这是因为链接地址里并没有path路径信息。如果我们通过path()方法手动的设置一个path信息,然后再刷新浏览器(刷新时浏览器的url地址是你修改过的信息,是不会变的),就会看到path的信息了。有图有真相!

实例 2

$location.path('detail');
$scope.path = $location.path();

AngularJS内建服务$location及其功能详解

从上面的小的修改中看到,我修改了代码,首先通过setter方法在$location这个内建的服务(其实质就是一个对象,里面有很多关于url信息的属性)里修改了它的path属性的值。
然后再通过getter方法获取到这个新的值。

又因为location这个服务于浏览器地址栏的URL信息是双向绑定的(这是angularJS最精妙的地方),所以无论 location对象的属性还是浏览器地址栏,只要有一方的url信息改变,那么另一方也会跟着改变。所以看到截图中浏览器的地址栏中也多了一个detail这样的path信息,这个信息是之前通过代码设置的。

关于AngularJS实现分页显示功能在下篇文章中为大家进行介绍,希望大家不要错过。

Javascript 相关文章推荐
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
vue中监听返回键问题
Aug 28 Javascript
学习Angularjs分页指令
Jul 01 #Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 #Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 #Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 #Javascript
AngularJS优雅的自定义指令
Jul 01 #Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 #Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 #Javascript
You might like
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php微信公众平台开发类实例
2015/04/01 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
动态表格Table类的实现
2009/08/26 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
Vue实现页面添加水印功能
2019/11/09 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
python实现静态服务器
2019/09/05 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Python3 读取Word文件方式
2020/02/13 Python
Python yield的用法实例分析
2020/03/06 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
大专生简历的自我评价
2013/11/26 职场文书
高二地理教学反思
2014/01/24 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
nginx搭建NFS网络文件系统
2022/04/14 Servers
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers