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验证表单大全
Nov 25 Javascript
JQuery 网站换肤功能实现代码
Nov 02 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
JS实现简单tab选项卡切换
Oct 25 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php的hash算法介绍
2014/02/13 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
React实现全选功能
2020/08/25 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
思想品德课教学反思
2014/02/10 职场文书
项目建议书范文
2014/05/12 职场文书
教育实习指导教师评语
2014/12/31 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
红色革命电影观后感
2015/06/18 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
初中物理教学反思
2016/02/19 职场文书