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类中定义原型方法的两种实现的区别
Mar 08 Javascript
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
对比分析json及XML
Nov 28 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
基于js实现抽红包并分配代码实例
Sep 19 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
PHP 实现缩略图
2021/03/09 PHP
鼠标图片振动代码
2006/07/06 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
浅析python继承与多重继承
2018/09/13 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python做反被爬保护的方法
2019/07/01 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Django框架安装方法图文详解
2019/11/04 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
护士进修自我鉴定
2014/02/07 职场文书
动员大会主持词
2014/03/20 职场文书
公安学专业求职信
2014/07/27 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
幼师中班个人总结
2015/02/12 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
python调试工具Birdseye的使用教程
2021/05/25 Python
德生2P3收音机开箱评测
2022/04/30 无线电