高效利用Angular中内置服务$http、$location等

AngularJS中为我们提供了众多的内置服务，通过这些内置服务可以轻松的实现一些常用功能。下面对Angular中常用的内置服务进行一下总结。
1.$location服务

$location服务用于返回当前页面的URL地址，示例代码如下：
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
 $scope.myUrl = $location.absUrl();
});

这里为$scope对象定义了myUrl变量，然后利用$location服务读取到了URL地址并存储到myUrl中。
2..$http服务
$http 是 AngularJS 中最常用的服务，它经常用于服务器的数据传输。下面的例子中服务向服务器发送请求，应用响应服务器传送过来的数据。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
 $http.get("welcome.htm").then(function (response) {
  $scope.myWelcome = response.data;
 });
});

3.$timeout()服务和$interval()服务
这两个服务的功能对应的是javascript中的setTimeout()和setTimeInterval函数。一个简单的实时更新时间例子如下：

app.controller('myCtrl', function($scope, $interval) {
 $scope.theTime = new Date().toLocaleTimeString();
 $interval(function () {
  $scope.theTime = new Date().toLocaleTimeString();
 }, 1000);
});

除了Angular中提供的内置服务外，我们也可以自己定义服务，利用service即可，下面是一个定义服务的基本代码框架：

app.service('hexafy', function() {
 this.myFunc = function (x) {
  return x.toString(16);
 }
});

定义好服务后，我们可以像使用内置的Angular服务一样使用它：

app.controller('myCtrl', function($scope, hexafy) {
 $scope.hex = hexafy.myFunc(255);
});

以上就是针对Angular中常用的内置服务进行的汇总，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • Angular的$http与$location

    Angular的$http与$location

    $http 但是对于一个web应用,angular是如何同服务端进行交互获得数据的呢? <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$http',function($scope,$http){ $http({ method : 'GET', url : 'http/data.php', }).success(functi

  • 详解angular中通过$location获取路径(参数)的写法

    我最近在研究angular中通过$location获取路径(参数)的写法,在网上搜索了很多的资料,正好今天有时间,就整理一下! 以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例 [一]获取 (不修改URL) //获取当前完整的url路径 var absurl = $locationabsUrl(); //http://88:8100/#/homePage?id=10&a=100 // 获取当前url

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

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

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

  • 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.单击后退或者前进按钮(或者点击一个历

  • angular中使用路由和$location切换视图

    我们可以利用angular的$route服务来定义这样一种东西:对于浏览器所指向的特定URL,angular会加载并显示一个模板,并实例化一个控制器为模板提供内容. 在应用中,你可以通过调用$routeProvider服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可. 伪代码如下: 复制代码 代码如下: var someModule = angular.module('somemodule',[...module dependencies...]) someModule.c

  • 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

  • 高效利用Angular中内置服务$http、$location等

    AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能.下面对Angular中常用的内置服务进行一下总结. 1.$location服务 $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absU

  • python中内置函数ord()返回字符串的ASCII数值实例详解

    python中内置函数ord()返回字符串的ASCII数值实例详解

    目录 常用 ASCII 码表对照表: ord()函数介绍: 应用实例: 常用 ASCII 码表对照表: 注意如下几点: 0-9:48-57A-Z:65-90a-z:97-122 ord()函数介绍: ord() 函数是 chr() 函数(对于 8 位的 ASCII 字符串)的配对函数,它以一个字符串(Unicode 字符)作为参数,返回对应的 ASCII 数值,或者 Unicode 数值. >>> ord('0') 48 >>> ord('A') 65 >>

  • Angular.JS内置服务$http对数据库的增删改使用教程

    本文主要介绍的是Angular.JS内置服务$http对数据库的增删改操作的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.使用$http查询MySQL数据 angular.module('app',[]) .controller('MyCtrl',function ($scope,$http) { $http.get('http://127.0.0.1:80/user/getUsers') .success(function (resp) { console.log(resp);

  • 深入理解Django中内置的用户认证

    前言 本文主要给大家介绍了关于Django中内置用户认证的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 认证登陆 在进行用户登陆验证的时候,如果是自己写代码,就必须要先查询数据库,看用户输入的用户名是否存在于数据库中: 如果用户存在于数据库中,然后再验证用户输入的密码,这样一来就要自己编写大量的代码. 事实上,Django已经提供了内置的用户认证功能. 在使用"python manage.py makemigrationss"和"python m

  • 对Django中内置的User模型实例详解

    User模型 User模型是这个框架的核心部分.他的完整的路径是在django.contrib.auth.models.User. 字段 内置的User模型拥有以下的字段: 1.username: 用户名.150个字符以内.可以包含数字和英文字符,以及_.@.+..和-字符.不能为空,且必须唯一! 2.first_name:歪果仁的first_name,在30个字符以内.可以为空. 3.last_name:歪果仁的last_name,在150个字符以内.可以为空. 4.email:邮箱.可以为空

  • Python3.6.x中内置函数总结及讲解

    Python3.6.x中内置函数总结 # -*- coding:utf-8 -*- """ abs() dict() help() min() setattr() all() dir() hex() next() slice() any() divmod() id() object() sorted() ascii() enumerate() input() oct() staticmethod() bin() eval() int() open() str() bool()

  • 对Python中内置异常层次结构详解

    如下所示: BaseException +-- SystemExit +-- KeyboardInterrupt +-- GeneratorExit +-- Exception +-- StopIteration +-- StandardError | +-- BufferError | +-- ArithmeticError | | +-- FloatingPointError | | +-- OverflowError | | +-- ZeroDivisionError | +-- Asse

  • javascript中内置对象Math的介绍及用法案例

    javascript中内置对象Math的介绍及用法案例

    目录 前言 Math概述 Math中常用函数的用法 1.绝对值方法 2.三个取整方法 3.求最大值/最小值 4.随机数 结语 前言 今天总结一下javascript 内置对象Math中的函数用法,顺带写一下常见的案例. Math概述 Math 对象不是构造函数,它具有数学常数和函数的属性和方法.跟数学相关的运算(求绝对值,取整.最大值等)可以使用 Math 中的成员. Math中常用函数的用法 Math.PI //圆周率Math.floor () //向下取整Math.ceil () //向上取

  • Python编程中内置的NotImplemented类型的用法

    目录 一.NotImplemented它是什么? 二.它有什么用?什么时候用? 一.NotImplemented它是什么? >>> type(NotImplemented) <type 'NotImplementedType'> NotImplemented 是Python在内置命名空间中的六个常数之一.其他有False.True.None.Ellipsis 和 debug.和 Ellipsis很像,[NotImplemented] 能被重新赋值(覆盖).对它赋值,甚至改变属

  • python中内置库os与sys模块的详细介绍

    python中内置库os与sys模块的详细介绍

    目录 os包 sys模块 os包 想要使用os包一样要先导入:import os os包下可以直接调用的函数 下面介绍一下os包中可以直接调用的函数: 例子: 例子: 例子: 注意:os.path.exists()参数可以传绝对路径,也可以传相对路径: 已知一个文件的路径,可以用spilt切割出这个文件名: sys模块 sys模块常用于操作当前的操作系统/环境 sys中常用的函数: 例子: 关于argv我们知道,他可以从程序外部获取参数,我们让他从终端传入参数给程序. 举一个详细的例子介绍: 可

随机推荐