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的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
js字符串操作方法实例分析
May 06 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
js获取一组日期中最近连续的天数
May 25 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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怎样调用MSSQL的存储过程
2006/10/09 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
php实现文章评论系统
2019/02/18 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python补齐字符串长度的实例
2018/11/15 Python
python实现移位加密和解密
2019/03/22 Python
python mysql断开重连的实现方法
2019/07/26 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
HTML5标签大全
2016/11/23 HTML / CSS
新驾驶员个人自我评价
2014/01/03 职场文书
创业计划书如何编写
2014/02/06 职场文书
主题班会演讲稿
2014/05/22 职场文书
学生检讨书
2015/01/27 职场文书
红歌会主持词
2015/07/02 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
Python字符串的转义字符
2022/04/07 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
MySQL数据管理操作示例讲解
2022/12/24 MySQL