Angularに組み込まれたサービスを効率的に活用


AngularJSでは、多くの組み込みサービスを提供しています.これらの組み込みサービスにより、一般的な機能を簡単に実現できます.Angularでよく使われる組み込みサービスについてまとめます.
1.$locationサービス
$locationサービスは、現在のページのURLアドレスを返すために使用されます.サンプルコードは次のとおりです.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

ここでは$scopeオブジェクトにmyUrl変数を定義し、$locationサービスを使用してURLアドレスを読み込みmyUrlに格納します.
2..$httpサービス
$httpはAngularJSで最も一般的なサービスであり、サーバのデータ転送によく使用されます.次の例では、サービスがサーバに要求を送信し、サーバから送信されたデータに応答する.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

3.$timeout()サービスと$interval()サービス
この2つのサービスの機能はjavascriptのsettimeout()とsettimeInterval関数に対応しています.簡単なリアルタイム更新時間の例は次のとおりです.
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

Angularで提供されている組み込みサービスに加えて、サービスを自分で定義することもできます.サービスを利用すればいいです.次はサービスを定義する基本コードフレームワークです.
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

サービスを定義すると、内蔵のAngularサービスのように使用できます.
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});