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代码要注意的几条规则
Sep 10 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue.js实现双击放大预览功能
Jun 23 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
JAVA/JSP学习系列之六
2006/10/09 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php实现简单加入购物车功能
2017/03/07 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
傲盾软件面试题
2015/08/17 面试题
服装公司总经理岗位职责
2013/11/30 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
个人授权委托书
2014/04/03 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
工程售后服务方案
2014/06/08 职场文书
会计电算化专业求职信
2014/06/10 职场文书
天堂的孩子观后感
2015/06/11 职场文书
创业计划书之面包店
2019/09/12 职场文书