Articles

AngularJS Services

On 10月 5, 2021 by

AngularJSでは、独自のサービスを作成したり、多くの組み込みサービスのうちの1つを使用できます。

サービスとは何ですか

AngularJSにおいて、サービスとは、あなたのAngularJSアプリケーションに利用でき、限定的に利用する機能、またはオブジェクトを指します。

$locationサービスには、現在の Web ページの場所に関する情報を返すメソッドがあります。

例

コントローラで $location サービスを使用する。module(‘myApp’, );
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

Try it Yourself ”

$locationサービスは引数としてコントローラーに渡されることに注意してください。 コントローラでサービスを使用するには、依存関係として定義する必要があります。

Why use Services?

$location サービスのように多くのサービスでは、window.location オブジェクトのようにすでに DOM にあるオブジェクトを使用できるように思えますが、少なくとも AngularJS アプリケーションではいくつかの制約があるでしょう。

AngularJS は常にアプリケーションを監視し、変更やイベントを適切に処理するために、AngularJS は window.location オブジェクトの代わりに $location サービスを使用することを推奨します。

The $http Service

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

Try it Yourself ”

This example shows a very simple use of the $http service.All Rights Reserved.

The $timeout Service

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

例

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

var app = angular.module(‘myApp’, );
app.Timeout Service

Display a new message after two seconds:

#107070> service.The $1070 サービスは AngularJs のバージョンです。controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = “Hello World!”;
$timeout(function () {
$scope.myHeader = “How are you today?”;
$scope.myHeader = “How are you today?”;
$timeout(function () {
$scope.myHeader = “Hello World!”;
}, 2000);
});

Try it Yourself ”

The $interval Service

The $interval service is AngularJS version of the window.setIntervalfunction.Theサービスは、AngularJSが開発したものです。

例

1秒ごとに時間を表示する：

var app = angular.module(‘myApp’, );
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);

Try it Yourself ”

Create Your Own Service

独自のサービスを作成するには、サービスをモジュールに接続します:

名前 hexafy サービスを作成する :

app.Createサービス: app.Createサービス:

hexafyサービスを作成するには、モジュールをモジュールに接続します:

this.myFunc = function (x) {
return x.MyFunc = function (x) {
return x.toString(16);
}
});

カスタム サービスを使用するには、コントローラを定義するときに依存関係として追加します:

例

数字を 16 進数に変換するには hexafy というカスタム サービスを使用します：

app.controller(‘myCtrl’, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

Try it yourself ”

Use a Custom Service inside a Filter

サービスを作成し、アプリケーションに接続したら、そのサービスを任意のコントローラー、ディレクティブ、フィルター、または他のサービスの中で使用することができます。

フィルター内でサービスを使用するには、フィルターを定義するときに依存関係として追加します。

フィルター myFormat で使用するサービス hexafy:

app.filter(‘myFormat’,);

Try it Yourself ”

オブジェクトまたは配列から値を表示するときにフィルターを使用することができます。

hexafy という名前のサービスを作成します:

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

Try it Yourself ”

コメントを残す

メールアドレスが公開されることはありません。