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. org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 语法分析器在此文档中遇到多个 "64,000" 实体扩展; 这是应用程序施加的限制

    使用SAX解析XML文件.XML文件有1.5G,程序抛出了这个问题: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 语法 ...

  2. 绝对布局absoluteLayout

    绝对布局absoluteLayout 一.简介 二.实例 绝对布局我们是指定的横纵坐标,所以可以这样直接拖 绝对布局实际中用的少

  3. C++(二十) — 指针常量和常量指针

    1.const 常量概念 对于 const 定义的常量,必须在定义时初始化,不能在程序执行运行过程中改变. 2.指针常量.常量指针 区别 (1)技巧:从右向左读,替代方法: p:换为  p is a: ...

  4. Tavas and Karafs 二分+结论

    二分比较容易想到 #include<map> #include<set> #include<cmath> #include<queue> #includ ...

  5. [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置

    [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置 https://github.com/dotnet-architecture/eShopOnContain ...

  6. Struts02---实现struts2的三种方式

    01.创建普通类 /** * 01.普通类 * 写一个execute() 返回String类型值 * */ public class HelloAction01 { public String exe ...

  7. Ubuntu窗口大小调节方法

    Description: 在Vmware Workstation 11上安装了Ubuntu 10.0,画面显示如下所示: Ubuntu系统的屏幕太小.调整方法:调节显示器分辨率即可,下图是将分辨率调节 ...

  8. antd-iconfont for inner network

    npm install antd-iconfont --save npm install less less-loader --save-dev webpack.config.js const pat ...

  9. js 复制粘贴功能记录

    最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制 首先复制的过程分为两步曲,无论 ...

  10. Java IO流读写文件的几个注意点

     平时写IO相关代码机会挺少的,但却都知道使用BufferedXXXX来读写效率高,没想到里面还有这么多陷阱,这两天突然被其中一个陷阱折腾一下:读一个文件,然后写到另外一个文件,前后两个文件居然不 ...