AngularJS サービス

AngularJS では、独自のサービスを作成したり、多くの組込みサービスのいずれかを使用したりできます。

サービスとは？

AngularJS におけるサービスは、AngularJS のアプリケーションに利用可能で、制限するための関数、またはオブジェクトです。

AngularJS には、約 30 の組込みサービスがあります。そのうちの一つが $location サービスです。

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

例

コントローラで $location サービスを使用します：

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

$location サービスは、引数としてコントローラに渡されることに注意してください。 コントローラ内のサービスを利用するためには、依存関係として定義されなければなりません。 （In order to use the service in the controller, it must be defined as a dependency.）

なぜサービスを使うのか？

For many services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.location object, and you could, but it would have some limitations, at least for your AngularJS application.

AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location service instead of the window.location object.

$http Service

$http service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response.

例

Use the $http service to request data from the server:

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 demonstrates a very simple use of the $http service. Learn more about the $http service in the AngularJS Http Tutorial.

$timeout Service

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

例

Display a new message after two seconds:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});
Try it Yourself »

$interval Service

$interval service is AngularJS' version of the window.setInterval function.

例

Display the time every second:

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

To create your own service, connect your service to the module:

Create a service named hexafy:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

To use your custom made service, add it as a dependency when defining the filter:

例

Use the custom made service named hexafy to convert a number into a hexadecimal number:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});
Try it Yourself »

Use a Custom Service Inside a Filter

Once you have created a service, and connected it to your application, you can use the service in any controller, directive, filter, or even inside other services.

To use the service inside a filter, add it as a dependency when defining the filter:

service hexafy used in the filter myFormat:

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
Try it Yourself »

You can use the filter when displaying values from an object, or an array:

Create a service named hexafy:

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