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如何判断某元素是否具备指定的样式
Nov 05 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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/09/25 PHP
php UBB 解析实现代码
2011/11/27 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Python中的asyncio代码详解
2019/06/10 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
keras中的History对象用法
2020/06/19 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
店长岗位的工作内容
2013/11/12 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
高三学生评语大全
2014/04/25 职场文书
关于读书的演讲稿
2014/05/07 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript