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 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 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学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php正则表达式(regar expression)
2011/09/10 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP7新增函数
2021/03/09 PHP
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
jQuery中html()方法用法实例
2014/12/25 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python让函数不返回结果的方法
2020/06/22 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
类、抽象类、接口的差异
2016/06/13 面试题
文明家庭先进事迹材
2014/01/27 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
应聘英语教师求职信
2014/04/24 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
交通事故起诉书
2015/05/19 职场文书
征求意见函
2015/06/05 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python