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 相关文章推荐
js汉字转拼音实现代码
Feb 06 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
Angular实现form自动布局
Jan 28 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 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版(5)
2006/10/09 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
微信小程序实现简单购物车功能
2020/12/30 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python做简单的字符串匹配详解
2017/03/21 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
使用tensorflow实现线性svm
2018/09/07 Python
python安装requests库的实例代码
2019/06/25 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
小学假期安全广播稿
2014/09/28 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
庭外和解协议书
2016/03/23 职场文书
python 实现的截屏工具
2021/05/08 Python
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python
springboot读取nacos配置文件
2022/05/20 Java/Android
Python+DeOldify实现老照片上色功能
2022/06/21 Python