AngularJS 服务(Service)

AngularJS では、独自のサービスを作成するか、組み込みサービスを使用できます。

サービスとは何ですか？

AngularJS において、サービスは関数またはオブジェクトであり、AngularJS アプリケーション内で使用できます。

AngularJSには30以上のサービスが組み込まれています。

有个$locationサービスは、現在のページのURLアドレスを返すことができます。

实例

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

尝试一下 »

注意$locationサービスは controller にパラメータとして渡されます。それを使用するには、controller 内で定義する必要があります。

なぜサービスを使用するのか？

多くのサービス、例えば $location サービスでは、DOM に存在するオブジェクトを使用できます。これは window.location オブジェクトに似ていますが、window.location オブジェクトは AngularJS アプリケーションにおいていくつかの制限があります。

AngularJS は常にアプリケーションを監視し、イベントの変化を処理します。AngularJS は使用します。$location服务比使用window.locationオブジェクトの方が良い。

$location vs window.location

  window.location $location.service
目的 現在のブラウザ位置に対する読み書き操作を許可します。 現在のブラウザ位置に対する読み書き操作を許可します。
API 読み書きできるオブジェクトを公開する jQueryスタイルのリーダー/ライターを公開する
AngularJS アプリケーションのライフサイクル内でアプリケーションと統合するかどうか。 否 アプリケーションのライフサイクル内のすべての段階を取得でき、$watch と統合されます。
HTML5 API とのシームレスな統合かどうか。 否 （低機能ブラウザへのグレースフルデグラデーション）である
アプリケーションのコンテキストに関連するかどうか 否，window.location.path返回"/docroot/actual/path" はい、$location.path() は "/actual/path" を返します。

$http 服务

$httpAngularJS アプリケーションで最もよく使用されるサービスです。サービスはサーバーにリクエストを送信し、アプリケーションはサーバーから送信されたデータに応答します。

实例

使用$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 服务

AngularJS $timeoutサービスはJSに対応しています 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 服务

AngularJS $intervalサービスはJSに対応しています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数値を16進数に変換する：

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

尝试一下 »

オブジェクト配列から値を取得する際には、フィルターを使用できます:

创建服务hexafy:

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

尝试一下 »
其他扩展