AngularJS内建服务$location及其功能详解

在学习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>

从截图能够明显的看出，$location这个服务提供的getter方法可以很方便的获取l浏览器当前的url信息。

细心的同学可能已经看到了，这个path怎么没有值呢？
这是因为链接地址里并没有path路径信息。如果我们通过path（）方法手动的设置一个path信息，然后再刷新浏览器（刷新时浏览器的url地址是你修改过的信息，是不会变的），就会看到path的信息了。有图有真相！

实例 2

$location.path('detail');
$scope.path = $location.path();

从上面的小的修改中看到，我修改了代码，首先通过setter方法在$location这个内建的服务（其实质就是一个对象，里面有很多关于url信息的属性）里修改了它的path属性的值。
然后再通过getter方法获取到这个新的值。

又因为location这个服务于浏览器地址栏的URL信息是双向绑定的（这是angularJS最精妙的地方），所以无论 location对象的属性还是浏览器地址栏，只要有一方的url信息改变，那么另一方也会跟着改变。所以看到截图中浏览器的地址栏中也多了一个detail这样的path信息，这个信息是之前通过代码设置的。

关于AngularJS实现分页显示功能在下篇文章中为大家进行介绍，希望大家不要错过。

赞 (0)

相关推荐

  • AngularJS通过$location获取及改变当前页面的URL

    注意 本文中获取与修改的URL以 'http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例: 一. 获取url的相关方法(不修改URL): 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $locati

  • AngularJs Using $location详解及示例代码

    AngularJs Using $location详解及示例代码

    一.What does it do? $location服务分析浏览器地址栏中的URL(基于window.location),让我们可以在应用中较为方便地使用URL里面的东东.在地址栏中更改URL,会响应到$location服务中,而在$location中修改URL,也会响应到地址栏中. $location服务: 暴露当前浏览器地址栏的URL,所以我们可以 1.注意和观察URL 2.改变URL 当用户做以下操作时,与浏览器一起同步URL: 1.改变地址栏 2.单击后退或者前进按钮(或者点击一个历

  • AngularJS的$location使用方法详解

    AngularJS的$location使用方法详解 一.配置config app.config([ '$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ //设置为html5Mode(模式),当为false时为Hashbang模式 enabled : true, //是否需要加入base标签,这里设置为false,设置为true时,需在html的head配置<base href="&

  • AngularJS内建服务$location及其功能详解

    AngularJS内建服务$location及其功能详解

    在学习AngularJS的过程中感觉到,通过一次性从服务端的数据库获取信息,在前端进行分页,这是一种比较可取的方式.因为它节省了前后端的通信负载,把更多的显示方面的任务交给前端处理. 此内容分为两个部分,第一部分给大家简单介绍一下AngularJS的内建服务$location及其功能:第二部分通过一个比较完整的综合实例来实现分页显示数据库信息的效果. 在做angularJS的Mutilpe View & Route 的工作时,感觉到应该更加深入的了解一下angularJS的内建的服务&lo

  • IndexedDB浏览器内建数据库并行更新问题详解

    目录 正文 打开数据库 并行更新问题 正文 IndexedDB 是一个浏览器内建的数据库,它比 localStorage 强大得多. 通过支持多种类型的键,来存储几乎可以是任何类型的值. 支撑事务的可靠性. 支持键值范围查询.索引. 和 localStorage 相比,它可以存储更大的数据量. 对于传统的 客户端-服务器 应用,这些功能通常是没有必要的.IndexedDB 适用于离线应用,可与 ServiceWorkers 和其他技术相结合使用. 根据规范 www.w3.org/TR/Index

  • Django框架使用内置方法实现登录功能详解

    本文实例讲述了Django框架使用内置方法实现登录功能.分享给大家供大家参考,具体如下: 一 内置登录退出思维导图 二 Django内置登录方法 1 位置 2 源码 @deprecate_current_app @sensitive_post_parameters() @csrf_protect @never_cache # 视图函数要渲染的模板位置(registration/login.html) def login(request, template_name='registration/l

  • 使用C++扩展Python的功能详解

    使用C++扩展Python的功能详解

    本文主要研究的是使用C++扩展Python的功能的相关问题,具体如下. 环境 VS2005Python2.5.4Windows7(32位) 简介 长话短说,这里说的扩展Python功能与直接用其它语言写一个动态链接库,然后让Python来调用有点不一样(虽然本质是一样的).而是指使用Python本身提供的API,使用C++来对Python进行功能性扩展,可以这样理解,使用更高效的语言实现一些算法计算等等需要更高执行效率的核心(或者需要与系统进行密切交互的)模块,然后让Python像调用内建标准库

  • Android端内数据状态同步方案VM-Mapping详解

    Android端内数据状态同步方案VM-Mapping详解

    目录 背景 问题拆解 目标 方案调研 EventBus 基于k-v的监听.通知 全局共享数据Model实例 基于注解的对象映射方案VM-Mapping 特点 思考 突破View层级的限制 突破类型的限制 详细设计 映射 数据驱动UI 总体流程 其它细节 方案对比 方案收益 后续计划 背景 西瓜在feed.详情页.个人主页有一块功能区,包括了点赞.收藏.关注等功能.这些功能长久以来都是孤立的:多个场景下点赞.收藏.关注等状态或数量不一致.在以往的业务迭代中,都是业务A有了需求,就加个点赞的请求,把

  • Python标准库sys库常用功能详解

    Python标准库sys库常用功能详解

    目录 1.查看版本信息 2.四大实现详细信息 3.查看Python解释器的相关信息 3.设置python解释器信息 4.标准输入.输出和错误流 5.查看系统平台相关信息 6.其他 1.查看版本信息 # coding:utf-8 import sys # 获取 Python版本信息 print(sys.version) # 获取解释器中C的API版本 print(sys.api_version) # 获取Windows系统功能版本 print(sys.getwindowsversion()) #

  • angularJs关于指令的一些冷门属性详解

    angularJs关于指令的一些冷门属性详解

    我们使用ng的时候,经常会使用到指令,大家所熟知的属性我在这里就不介绍了,讲讲大家没怎么留意的属性 1.multiElement 这是指定指令作用区间的功能,最常用的就是ng-repeat-start和ng-repeat-end了. 2.priority 指令优先级,优先级越高,指令越早执行. 3.terminal 是否允许优先级低的指令起作用,如果是true,那么只有比当前指令或跟当前指令等级相同的指令才可以执行.最典型的就是ngIf 4.templateNamespace 声明模板的格式有三

  • mysql分区功能详解,以及实例分析

    一,什么是数据库分区 前段时间写过一篇关于mysql分表的 的文章,下面来说一下什么是数据库分区,以mysql为例.mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面 (可以通过my.cnf中的datadir来查看),一张表主要对应着三个文件,一个是frm存放表结构的,一个是myd存放表数据的,一个是myi存表 索引的.如果一张表的数据量太大的话,那么myd,myi就会变的很大,查找数据就会变的很慢,这个时候我们可以利用mysql的分区功能,在物理上将这 一张

  • django实现用户登陆功能详解

    django实现用户登陆功能详解

    简介: Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架,由Python写成. Django遵守BSD版权,初次发布于2005年7月, 并于2008年9月发布了第一个正式版本1.0 . Django采用了MVC的软件设计模式,即模型M,视图V和控制器C. 用户名密码登陆实现: 在apps.users下找到views.py文件: 以下代码重写了authenticate()

随机推荐