AngularJSでは、独自のサービスを作成するか、多くの組み込みのサービスのいずれかを使用することができます。
サービスとは何ですか？
AngularJSでは、サービスは、関数、またはオブジェクトは、それがために利用可能な、そして、あなたのAngularJSのアプリケーションに制限されています。
AngularJSは約30組み込みのサービスを提供しています。 そのうちの一つは、 $locationサービス。
$locationサービスは、現在のWebページの場所に関する情報を返すメソッドがあります。
例
使用$locationコントローラでサービスを：
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
}); »それを自分で試してみてください ことに注意してください$locationサービスは、引数としてコントローラに渡されます。 コントローラ内のサービスを利用するためには、依存関係として定義されなければなりません。
なぜサービスを使うのか？
多くのサービスのために、同様に$locationサービス、あなたのようなDOMに既に登録されているオブジェクト、使用することができるように思えるwindow.locationオブジェクトを、あなたは可能性が、それは少なくともあなたのAngularJSのアプリケーション用に、いくつかの制限を持っているでしょう。
AngularJSは常にアプリケーションを監視し、それが適切に変更し、イベントを処理するために、AngularJSは、使用することを好む$locationの代わりに、サービスwindow.locationオブジェクトを。
$ HTTPサービス
$httpサービスはAngularJSアプリケーションで最も一般的な使用されているサービスの一つです。 サービスは、サーバーへの要求を行い、アプリケーションが応答を処理することができます。
例
使用$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」バージョンである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」バージョンである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);
});
»それを自分で試してみてください フィルター内部にカスタム・サービスを使用します
あなたがサービスを作成し、アプリケーションにそれを接続したら、あなたは任意のコントローラ、ディレクティブ、フィルターで、あるいは他のサービスの内部でサービスを利用することができます。
フィルタを定義する際にフィルタの内部サービスを使用するには、依存関係として追加します：
サービスhexafyフィルタで使用myFormat ：
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
»それを自分で試してみてください オブジェクト、または配列から値を表示するときには、フィルタを使用することができます。