菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS 服务


在 AngularJS 中,您可以创建自己的服务,也可以使用许多内置服务之一。


什么是服务?

在 AngularJS 中,服务是一个函数或对象,它可以供您的 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 对象。


The $http Service

The $http service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response.

示例

Use the $http service to request data from the server

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

This example demonstrates a very simple use of the $http service. Learn more about the $http service in the AngularJS Http Tutorial.



The $timeout Service

The $timeout service is AngularJS' version of the window.setTimeout function.

示例

Display a new message after two seconds

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

The $interval Service

The $interval service is AngularJS' version of the window.setInterval function.

示例

Display the time every second

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
    $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
自己动手试一试 »

Create Your Own Service

To create your own service, connect your service to the module

Create a service named hexafy

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

To use your custom made service, add it as a dependency when defining the controller

示例

Use the custom made service named hexafy to convert a number into a hexadecimal number

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
自己动手试一试 »

Use a Custom Service Inside a Filter

Once you have created a service, and connected it to your application, you can use the service in any controller, directive, filter, or even inside other services.

To use the service inside a filter, add it as a dependency when defining the filter

The service hexafy used in the filter myFormat

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
}]);
自己动手试一试 »

You can use the filter when displaying values from an object, or an array

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持