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 UI的拖拽功能实现方法小结
Mar 14 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 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连接Oracle for NT 远程数据库
2006/10/09 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
Python中的pprint折腾记
2015/01/21 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
python中entry用法讲解
2020/12/04 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
人力资源部岗位职责
2015/02/11 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL