AngularJS サービス

AngularJS では、独自のサービスを作成したり、多くの内蔵サービスの1つを使用できます。

サービスとは何ですか？

AngularJS では、サービスは関数やオブジェクトであり、AngularJS アプリケーション内で使用され、限定されます。

AngularJS には約30の内蔵サービスがあります。その1つは $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 アプリケーションで最もよく使用されるサービスの1つです。このサービスはサーバーにリクエストを送信し、アプリケーションが応答を処理するようにします。

实例

サーバーからデータをリクエストするための $http サービスを使用：

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

自分で試してみる

この例では $http 非常にシンプルな使い方です。$http サービスの詳細については AngularJS Http タイプのチュートリアルを参照してください。

$timeout サービス

$timeout サービスは AngularJS 版の window.setTimeout 関数。

实例

2秒後に新しいメッセージを表示する：

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>

自分で試してみる