AngularJS教程

浏览7523
更新时间2025-08-11

什么是服务?

在 AngularJS 中,服务是函数或对象,可用于并仅限于您的 AngularJS 应用程序。

AngularJS 有大约 30 个内置服务。其中之一是 $location 服务。

$location 服务有方法可以返回有关当前网页位置的信息:

实例

在控制器中使用 $location 服务:

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

点击 "运行实例" 按钮查看在线实例

请注意,$location 服务作为参数传递到控制器。为了在控制器中使用该服务,必须将其定义为依赖项。

为什么使用服务?

对于许多服务,如 $location 服务,您似乎可以使用 DOM 中已有的对象(例如 window.location 对象),但它会有一些限制,至少对于您的 AngularJS 应用程序来说是这样。

AngularJS 不断监督您的应用程序,为了使其正确处理更改和事件,AngularJS 更喜欢您使用 $location 服务而不是 window.location 对象。

$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 服务的非常简单的用法。请在 AngularJS Http 教程中了解有关 $http 服务的更多信息。

$timeout 服务

$timeout 服务是 AngularJS 版本的 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 服务

$interval 服务是 AngularJS 版本的 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 的自定义服务将数字转换为十六进制数字:

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);
  };
}]);
运行实例 »

点击 "运行实例" 按钮查看在线实例

您可以在显示对象或数组中的值时使用该过滤器:

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
运行实例 »

点击 "运行实例" 按钮查看在线实例

相关视频

更多

免费

前端入门_HTML5
初级前端入门_HTML5

64.8万次学习

收藏

免费

30分钟学会网站布局
初级30分钟学会网站布局

24.6万次学习

收藏

免费

CSS视频教程-玉女心经版
初级CSS视频教程-玉女心经版

41.1万次学习

收藏

免费

JavaScript极速入门_玉女心经系列
初级JavaScript极速入门_玉女心经系列

76.4万次学习

收藏

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

64.9万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

41.2万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76.6万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

64.1万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.3万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

36.2万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

133.1万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7,16种组合,超全大合集

下载

VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载

VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载

php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载

VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载

SublimeText3汉化版
SublimeText3汉化版

中文版,非常好用

下载

Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包,适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载