Latest web development tutorials

AngularJSサービス(サービス)

AngularJS独自のサービスを作成、または組み込みのサービスを利用することができます。


サービスとは何ですか?

AngularJSでは、サービスは、関数またはオブジェクトはAngularJSアプリケーションで使用することができるされています。

AngularJSは30以上のサービスを構築しました。

現在のページのURLアドレスを返す$ロケーションサービスがあります。

VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'customersCtrl'、関数( $スコープ、$の場所){
$ Scope.myUrl = $ location.absUrl();
});

»をお試しください

$ロケーションサービスをコントローラにパラメータとして渡されることに注意してください。あなたがそれを使用したい場合は、コントローラに定義する必要があります。


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

$ HTTP AngularJSアプリケーションは、最も一般的に使用されるサービスです。サービスは、サーバから送信されたアプリケーションサーバーの応答データに要求を送信します。

常にwindow.locationのを使用するよりも、より良いサーブAngularJSは$場所を使用 、イベントが変更ハンドル、アプリケーションを監視しAngularJS。


$ HTTPサービス

$ HTTP AngularJSアプリケーションは、最も一般的に使用されるサービスです。サービスは、サーバから送信されたアプリケーションサーバーの応答データに要求を送信します。

サーバに$ HTTPサービス要求データを使用します。

VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'myCtrl'、関数( $スコープ、$ HTTP){
$ http.get(「あるwelcome.htm ").then (関数(応答){
$ Scope.myWelcome = response.data。
});
});

»をお試しください

上記の非常にシンプルな$ HTTPサービスインスタンスである、より$ HTTPサービス・アプリケーションを参照してくださいAngularJSのHttpチュートリアルを


$タイムアウトサービス

AngularJS $タイムアウトおよびサービスは、JSwindow.setTimeoutは機能に対応します。

情報は、2秒表示されます:

VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'myCtrl'、関数( $スコープ、$タイムアウト){
$ scope.myHeader = "Hello Worldの!」
$タイムアウト (関数(){
$ scope.myHeader = "どのように今日は ?」。
}、2000)。
});

»をお試しください

$間隔サービス

JS window.setIntervalサービス機能に対応する$間隔をAngularJS。

情報を表示するには2秒ごとに:

VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'myCtrl'、関数( $スコープ、$間隔){
$ scope.theTime =新しいDate()toLocaleTimeString ();
$間隔 (関数(){
$ scope.theTime =新しいDate()toLocaleTimeString ();
}、1000);
});

»をお試しください

カスタムサービスの作成

あなたは、あなたのモジュールへのリンクをカスタムサービスへのアクセスを作成することができます。

hexafyという名前のアクセスを作成します。

app.service( 'hexafy'、関数( ){
this.myFunc =関数(x)は、{
x.toString(16)を返します
}
});

カスタムサービスにアクセスするには、スタンドアロンの追加時にフィルタを定義する必要があります。

デジタルコンバータの16進数をhexafyカスタムサービスを使用します。

app.controller( 'myCtrl'、関数( $スコープ、hexafy){
$ scope.hex = hexafy .myFunc(255) ;
});

»をお試しください

カスタムサービスを使用してフィルタ

カスタムサービスを作成し、アプリケーションに接続するときは、コントローラ、ディレクティブ、フィルター、または他のサービスで使用することができます。

Hexafyは、フィルタmyFormat内でサービスを使用します。

app.filter( 'myFormat'、[ ' hexafy'、関数(hexafy){
return関数(x)は、{
.myFunc(X)をhexafy 返します
};
}])。

»をお試しください

あなたはフィルタを使用することができますオブジェクトの配列に値を取得します:

サービスhexafyを作成します。

<UL>
<李NG・リピート= "Xカウントの"> {{x |はmyFormat}} </ LI>
</ UL>

»をお試しください