Layanan AngularJS

Dalam AngularJS, anda boleh membuat perkhidmatan sendiri, atau menggunakan salah satu daripada berbagai perkhidmatan binaan yang ada.

Apakah perkhidmatan?

Dalam AngularJS, perkhidmatan adalah fungsi atau objek yang boleh digunakan dan hanya untuk aplikasi AngularJS anda.

AngularJS mempunyai kira-kira 30 perkhidmatan binaan. Salah satunya adalah $location perkhidmatan.

$location Perkhidmatan ini mempunyai kaedah yang dapat mengembalikan maklumat tentang lokasi halaman sekarang:

实例

Menggunakan perkhidmatan $location di pengawal:

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

Coba sendiri

Perhatian,$location Perkhidmatan ini dipasang ke pengawal sebagai parameter. Untuk dapat digunakan di pengawal, ia mesti ditakrifkan sebagai kewajiban.

Mengapa menggunakan perkhidmatan?

Untuk banyak perkhidmatan seperti $location perkhidmatan, anda kelihatan boleh menggunakan objek yang sudah ada di DOM (contohnya objek window.location），tetapi ia akan ada beberapa had, sekurang-kurangnya untuk aplikasi AngularJS anda.

AngularJS terus memantau aplikasi anda, untuk memastikan ia dapat mengendalikan perubahan dan peristiwa dengan betul, AngularJS lebih suka anda menggunakan $location perkhidmatan daripada objek window.location.

$http perkhidmatan

$http Perkhidmatan adalah salah satu daripada perkhidmatan paling sering digunakan dalam aplikasi AngularJS. Perkhidmatan ini menghantar permintaan kepada pelayan dan membenarkan aplikasi anda untuk mengendalikan respons.

实例

Menggunakan perkhidmatan $http untuk meminta data daripada pelayan:

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

Coba sendiri

此例演示了 $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);
});

Coba sendiri

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

Coba sendiri

创建您自己的服务

要创建自己的服务，请将服务与模块连接：

创建名为 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);
});

Coba sendiri

Menggunakan Layanan Khusus dalam Penapis

Buat layanan dan hubungkan ia kepada aplikasi anda kemudian anda boleh gunakan layanan ini dalam mana-mana pengawal, arahan, penapis, atau bahkan layanan lain.

Untuk menggunakan layanan dalam penapis, tambahkan ia sebagai kewajipan semasa menetapkan penapis:

Layanan yang digunakan dalam penapis myFormat: hexafy

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
});

Coba sendiri

Anda boleh gunakan penapis ini untuk menunjukkan nilai dalam objek atau array yang ditampilkan:

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

Coba sendiri