参考手册
AngularJS 过滤器
AngularJS HTTP

AngularJS 服务

在 AngularJS 中，您可以创建自己的服务，或者可以使用许多内置服务。

什么是服务?

在 AngularJS 中，服务是一个函数或对象，可用于且仅限于 AngularJS 应用程序。

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

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

实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7. <p>这个页面的 url 是:</p>
  8. <h3>{{myUrl}}</h3>
  9. </div>
  11. <p>本例使用内置的 $location 服务获取页面的绝对 url。</p>
  13. <script>
  14. var app = angular.module('myApp', []);
  15. app.controller('myCtrl', function($scope, $location) {
  16.     $scope.myUrl = $location.absUrl();
  17. });
  18. </script>
  20. </body>
  21. </html>
运行一下

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

为什么使用服务?

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

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

$http 服务

$http 服务是 AngularJS 应用程序中最常用的服务之一。该服务向服务器发出请求，并让您的应用程序处理响应。

实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>今天的欢迎消息是:</p>
  10. <h2>{{myWelcome}}</h2>
  12. </div>
  14. <p>$http 服务请求服务器上的一个页面，响应被设置为 "myWelcome" 变量的值。</p>
  16. <script>
  17. var app = angular.module('myApp', []);
  18. app.controller('myCtrl', function($scope, $http) {
  19.   $http.get("welcome.htm").then(function (response) {
  20.       $scope.myWelcome = response.data;
  21.   });
  22. });
  23. </script>
  25. </body>
  26. </html>
运行一下

这个例子演示了 $http 服务的一个非常简单的用法。在 AngularJS http 教程中了解有关 $http 服务的更多信息。

$timeout 服务

$timeout 服务是 AngularJS 版本的 window.setTimeout 功能。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>此标题将在两秒钟后更改:</p>
  10. <h2>{{myHeader}}</h2>
  12. </div>
  14. <p>$timeout 服务在指定的毫秒数后运行函数。</p>
  16. <script>
  17. var app = angular.module('myApp', []);
  18. app.controller('myCtrl', function($scope, $timeout) {
  19.   $scope.myHeader = "Hello World!";
  20.   $timeout(function () {
  21.       $scope.myHeader = "今天你好啊";
  22.   }, 2000);
  23. });
  24. </script>
  26. </body>
  27. </html>
运行一下

$interval 服务

$interval 服务是 AngularJS 版本的 window.setInterval 函数。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>时间是:</p>
  10. <h2>{{theTime}}</h2>
  12. </div>
  14. <p>$interval 服务每指定毫秒运行一次函数。</p>
  16. <script>
  17. var app = angular.module('myApp', []);
  18. app.controller('myCtrl', function($scope, $interval) {
  19.   $scope.theTime = new Date().toLocaleTimeString();
  20.   $interval(function () {
  21.       $scope.theTime = new Date().toLocaleTimeString();
  22.   }, 1000);
  23. });
  24. </script>
  26. </body>
  27. </html>
运行一下

创建自己的服务

要创建自己的服务，请将服务连接到模块:

创建一个名为 hexafy 的服务:

  1. app.service('hexafy', function() {
  2.  this.myFunc = function (x) {
  3.     return x.toString(16);
  4.  }
  5. });

要使用定制服务，请在定义控制器时将其添加为依赖项:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  5. <div ng-app="myApp" ng-controller="myCtrl">
  7. <p>255的十六进制值为:</p>
  9. <h2>{{hex}}</h2>
  11. </div>
  13. <p>具有将给定数字转换为十六进制数字的方法的自定义服务。</p>
  15. <script>
  16. var app = angular.module('myApp', []);
  18. app.service('hexafy', function() {
  19.     this.myFunc = function (x) {
  20.         return x.toString(16);
  21.     }
  22. });
  23. app.controller('myCtrl', function($scope, hexafy) {
  24.   $scope.hex = hexafy.myFunc(255);
  25. });
  26. </script>
  28. </body>
  29. </html>
运行一下

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

一旦创建了服务并将其连接到应用程序，就可以在任何控制器、指令、过滤器甚至其他服务中使用该服务。

要在过滤器中使用服务，请在定义过滤器时将其添加为依赖项：myFormat 过滤器中使用 hexafy 服务:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp">
  7. 使用定制过滤器内的定制服务转换数字 255:
  9. <h2>{{255 | myFormat}}</h2>
  11. </div>
  13. <script>
  14. var app = angular.module('myApp', []);
  15. app.service('hexafy', function() {
  16.     this.myFunc = function (x) {
  17.         return x.toString(16);
  18.     }
  19. });
  20. app.filter('myFormat',['hexafy', function(hexafy) {
  21.     return function(x) {
  22.         return hexafy.myFunc(x);
  23.     };
  24. }]);
  26. </script>
  28. </body>
  29. </html>
运行一下

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

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7. <p>在显示数组 [255, 251, 200] 时使用过滤器:</p>
  9. <ul>
  10.   <li ng-repeat="x in counts">{{x | myFormat}}</li>
  11. </ul>
  13. <p>此过滤器使用将数字转换为十六进制值的服务。</p>
  14. </div>
  16. <script>
  17. var app = angular.module('myApp', []);
  18. app.service('hexafy', function() {
  19.     this.myFunc = function (x) {
  20.         return x.toString(16);
  21.     }
  22. });
  23. app.filter('myFormat',['hexafy', function(hexafy) {
  24.     return function(x) {
  25.         return hexafy.myFunc(x);
  26.     };
  27. }]);
  28. app.controller('myCtrl', function($scope) {
  29.     $scope.counts = [255, 251, 200];
  30. });
  31. </script>
  33. </body>
  34. </html>
运行一下
AngularJS 过滤器
AngularJS HTTP

分类导航