ylbtech-AngularJS:Service
1.返回顶部
1、

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务,或使用内建服务。


什么是服务?

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务

有个 $location 服务,它可以返回当前页面的 URL 地址

实例

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

尝试一下 »

注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。


为什么使用服务?

在很多服务中,比如 $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象,但 window.location 对象在 AngularJS 应用中有一定的局限性。

AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。

$location vs window.location

  window.location $location.service
目的 允许对当前浏览器位置进行读写操作 允许对当前浏览器位置进行读写操作
API 暴露一个能被读写的对象 暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合 可获取到应用生命周期内的每一个阶段,并且和$watch整合
是否和HTML5 API的无缝整合 是(对低级浏览器优雅降级)
和应用的上下文是否相关 否,window.location.path返回"/docroot/actual/path" 是,$location.path()返回"/actual/path"

$http 服务

$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据

实例

使用 $http 服务向服务器请求数据:

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

尝试一下 »

以上是一个非常简单的 $http 服务实例,更多 $http 服务应用请查看 AngularJS Http 教程


$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

实例

两秒后显示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});

尝试一下 »


$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

实例

每一秒显示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

尝试一下 »


创建自定义服务

你可以创建自定义服务,链接到你的模块中:

创建名为hexafy 的服务:

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

要使用自定义服务,需要在定义控制器的时候独立添加,设置依赖关系:

实例

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

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

尝试一下 »


过滤器中,使用自定义服务

当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。

在过滤器 myFormat 中使用服务 hexafy:

app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);

尝试一下 »

在对象数组中获取值时你可以使用过滤器:

创建服务 hexafy:

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

尝试一下 »

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

AngularJS:Service的更多相关文章

  1. AngularJS:何时应该使用Directive、Controller、Service?【新手必看】

    (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...

  2. AngularJS:何时应该使用Directive、Controller、Service?

    AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...

  3. AngularJS 1.x系列:AngularJS服务-Service、Factory、Provider、Value及Constant(5)

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  4. AngularJS 1.x系列:AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  5. Android开发6:Service的使用(简单音乐播放器的实现)

    前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...

  6. Android(java)学习笔记171:Service生命周期

    1.Service的生命周期         Android中的Service(服务)与Activity不同,它是不能和用户交互,不能自己启动的,运行在后台的程序,如果我们退出应用的时候,Servic ...

  7. 基础总结篇之四:Service完全解析

    富貴必從勤苦得,男兒須讀五車書.唐.杜甫<柏學士茅屋> 作为程序员的我们,须知富贵是要通过勤苦努力才能得到的,要想在行业内有所建树,就必须刻苦学习和钻研. 今天我们来讲一下Android中 ...

  8. Linux: service network/Network/NetworkManager

    Linux:service network/Network/NetworkManager start 这三种有什么不同? 1.network service的制御网络接口配置信息改动后,网络服务必须从 ...

  9. 安卓开发23:Service详细解读

    关于Service Service说明:Service是android 系统中的四大组件之一(Activity.Service.BroadcastReceiver.ContentProvider),它 ...

随机推荐

  1. 解读Mirantis最新的Neutron性能测试

    最近,mirantis的工程师发布了最新的基于Mitaka版本的Neutron性能测试结果.得出的结论是:Neutron现在的性能已经可以用生产环境了. 报告的三位作者都是OpenStack社区的活跃 ...

  2. SQL使用事务

    BEGIN TRANSACTION--开始事务 DECLARE @errorSun INT --定义错误计数器 SET @errorSun=0 --没错为0 UPDATE a SET id=232 W ...

  3. Selenium with Python 009 - WebDriver API

    官方API文档:https://seleniumhq.github.io/selenium/docs/api/py/api.html 更多详情,最好的学习方式可以查阅官方API文档或直接阅读源码,本文 ...

  4. JS前端重点 -- Generator 函数的含义与用法

    Generator 函数的含义与用法 1.generator http://www.ruanyifeng.com/blog/2015/04/generator.html http://it.taocm ...

  5. 使用Spring实现MySQL读写分离

    1. 为什么要进行读写分离 大量的JavaWeb应用做的是IO密集型任务, 数据库的压力较大, 需要分流 大量的应用场景, 是读多写少, 数据库读取的压力更大 一个很自然的思路是使用一主多从的数据库集 ...

  6. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

  7. js & jquery数组介绍

    (转自:http://www.jb51.net/article/30793.htm) 1.数组的创建 var arr=new Array(); 2.查找数组中的元素 for(var i=0;i< ...

  8. css3 伪类

    ::selection { 选中后的样式 } 链接 p:only-child     p的父级只有一个p标签 p:only-of-type   p的父级有一个p标签, 但还可以包含其他标签 p:fis ...

  9. Java学习笔记——基础篇

    Tips1:eclipse中会经常用到System.out.println方法,可以先输入syso,然后eclipse就会自动联想出这个语句了!! 学习笔记: *包.权限控制 1.包(package) ...

  10. android代码设置EditText只输入数字、字母

     如何设置EditText,使得只能输入数字或者某些字母呢? 一.设置EditText,只输入数字: 方法1:直接生成DigitsKeyListener对象就可以了. et_1.setKeyLis ...