AngularJS 服务

AngularJS中的服务是一个函数或者对象。

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

AngularJS内建了三十多个服务。

使用服务的原因

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

AngularJS会一直监控应用,处理事件变化。

AngularJS使用$location服务比用window.location对象更好。

$location.service对比window.location:


$location.servicewindow.location
目的允许对当前浏览器位置进行读写操作允许对当前浏览器位置进行读写操作
API暴露jQuery风格的读写器暴露一个能被读写的对象
是否在AngularJS应用生命周期中和应用整合可获取到应用生命周期内的每一个阶段,并且和$watch整合
是否和HTML5 API的无缝整合
和应用的上下文是否相关

$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;
    });
});

运行案例

$timeout服务

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

实例:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello wiki!";
    $timeout(function () {
    $scope.myHeader = "Programmer's Dream Factory";
    }, 2000);
});

运行案例

$interval服务

$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',['hexify', function(hexify) {
        return function(x) {
        return hexify.myFunc(x);
    };
}]);

运行案例

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

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

运行案例

本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信