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 07 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
javaScript语法总结
Nov 25 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 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
我的论坛源代码(六)
2006/10/09 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
JS event使用方法详解
2008/04/28 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python函数的周期性执行实现方法
2016/08/13 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python程序需要编译吗
2020/06/19 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
服装发布会策划方案
2014/05/22 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers