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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
js电话号码验证方法
Sep 28 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
Vue.js中的组件系统
May 30 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
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
JS作用域深度解析
2016/12/29 Javascript
javascript常用的设计模式
2017/02/09 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
2014年助理政工师工作总结
2014/12/19 职场文书
地震慰问信
2015/02/14 职场文书
社区党支部承诺书
2015/04/29 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android