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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 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数据库开发知多少
2006/10/09 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP概率计算函数汇总
2015/09/13 PHP
Gird事件机制初级读本
2007/03/10 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Django权限机制实现代码详解
2018/02/05 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python3如何判断三角形的类型
2020/04/12 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
酒店营销策划方案
2014/02/07 职场文书
秋季运动会广播稿
2014/02/22 职场文书
建议书范文
2015/02/05 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
演讲比赛主持词
2015/06/29 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
DSP接收机前端设想
2022/04/05 无线电
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis