Angularに組み込まれたサービスを効率的に活用
1643 ワード
AngularJSでは、多くの組み込みサービスを提供しています.これらの組み込みサービスにより、一般的な機能を簡単に実現できます.Angularでよく使われる組み込みサービスについてまとめます.
1.$locationサービス
$locationサービスは、現在のページのURLアドレスを返すために使用されます.サンプルコードは次のとおりです.
ここでは$scopeオブジェクトにmyUrl変数を定義し、$locationサービスを使用してURLアドレスを読み込みmyUrlに格納します.
2..$httpサービス
$httpはAngularJSで最も一般的なサービスであり、サーバのデータ転送によく使用されます.次の例では、サービスがサーバに要求を送信し、サーバから送信されたデータに応答する.
3.$timeout()サービスと$interval()サービス
この2つのサービスの機能はjavascriptのsettimeout()とsettimeInterval関数に対応しています.簡単なリアルタイム更新時間の例は次のとおりです.
Angularで提供されている組み込みサービスに加えて、サービスを自分で定義することもできます.サービスを利用すればいいです.次はサービスを定義する基本コードフレームワークです.
サービスを定義すると、内蔵の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);
});