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构造器的实现代码小结
May 16 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
让table变成exls的示例代码
Mar 24 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
js制作支付倒计时页面
Oct 21 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
小程序实现列表展开收起效果
Jul 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
fgetcvs在linux的问题
2012/01/15 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP的反射机制实例详解
2017/03/29 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
js实现简单页面全屏
2019/09/17 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
办公室主任先进事迹
2014/01/18 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
团支部推优材料
2014/05/21 职场文书
天地会口号
2014/06/17 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
父亲节活动策划方案
2014/08/24 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers