AngularJSサービス(サービス)
AngularJSでは、独自のサービスを作成したり、ビルトインサービスを使用したりできます。
サービスとは何ですか?
AngularJSでは、サービスはAngularJSアプリケーションで使用できる関数またはオブジェクトです。
Angularjsには30を超える組み込みサービスがあります。
現在のページのURLアドレスを返すことができる$ロケーションサービスがあります。
例
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <p>現在のページURL:</p> <h3> {{myurl}} </h3> </div> <p>このインスタンスは、内蔵$ロケーションサービスを使用して現在のページのURLを取得します。 </p> <script> var app = angular.module( 'myapp'、[]); app.controller( 'myctrl'、function($ scope、$ location){$ scope.myurl = $ location.absurl();}); </script> </body> </html> </html>実行結果:
現在のページのURL:
http://www.runoob.com/try/try.php?filename=try_ng_services
このインスタンスは、内蔵$ロケーションサービスを使用して、現在のページのURLを取得します。
注:$ロケーションサービスは、パラメーターとしてコントローラーに渡されます。使用したい場合は、コントローラーで定義する必要があります。
なぜサービスを使用するのですか?
$ HTTPは、AngularJSアプリケーションで最も一般的に使用されるサービスです。サービスはサーバーにリクエストを送信し、アプリケーションはサーバーによって送信されたデータに応答します。
AngularJSは常にアプリケーションを監視し、イベントの変更を処理します。 AngularJSは、window.locationオブジェクトを使用するよりも$ロケーションサービスを使用します。
$ httpサービス
$ HTTPは、AngularJSアプリケーションで最も一般的に使用されるサービスです。サービスはサーバーにリクエストを送信し、アプリケーションはサーバーによって送信されたデータに応答します。
例
$ httpサービスを使用して、サーバーからデータをリクエストします。
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app "" ng " <p>ようこそ。 </p> <script> var app = angular.module( 'myapp'、[]); app.controller( 'myctrl'、function($ scope、$ http){$ http.get( "welcome.htm")。実行結果:
ようこそメッセージ:
訪問してください
$ httpサービスはサーバーから情報を要求し、返された値は変数「mywelcome」に配置されます。
上記は非常にシンプルな$ httpサービスインスタンスです。詳細については、httpサービスアプリケーションについては、Angularjs httpチュートリアルを確認してください。
$タイムアウトサービス
Angularjs $ Timeoutサービスは、JS Window.settimeout関数に対応しています。
例
情報は2秒で表示されます。
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app "" ng " <p>情報は2秒後に表示されます。 </p> <script> var app = angular.module( 'myApp'、[]); app.controller( 'myctrl'、function($ scope、$ timeout){$ scope.myheader = "hello world!"; $ timeout($ scope.myheader = "how today?実行結果:
情報は2秒で表示されます。
今日は元気ですか?
$タイムアウトアクセス指定された数ミリ秒後に指定された関数を実行します。
$間隔サービス
Angularjs $ intervalサービスは、js window.setinterval関数に対応しています。
例
2秒ごとに情報を表示します。
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app "" ng " <p>現在の時刻は次のとおりです。 </p> <scrip> var app = angular.module( 'myApp'、[]); app.controller( 'myctrl'、function($ scope、$ interval){$ scope.thetime = new date()。 1000);}); </script> </body> </html>ランニング効果:
今、時は次のとおりです。
3:41:09 PM
$ intervalアクセス指定された期間(ミリ秒単位)で関数を呼び出すか、カウント
カスタムサービスを作成します
モジュールにリンクするカスタムアクセスを作成できます。
Hexafyという名前のアクセスを作成します:
app.service( 'hexafy'、function(){this.myfunc = function(x){return x.tostring(16);}});カスタムアクセスを使用するには、フィルターを定義するときに独立して追加する必要があります。
例
カスタムサービスhexafyを使用して、数字をhexafyに変換します。
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <p> 255のヘキサグラムは次のとおりです。 function(x){return x.toString(16); app.Controller( 'myctrl'、function($ scope、hexafy){$ scope.hex = hexafy.myfunc(255);}); </script> </body> </html>実行結果:
255の16進システムは次のとおりです。
ff
16進数を変換するためのカスタムサービス:
フィルターでは、カスタムサービスを使用します
カスタムサービスを作成してアプリに接続すると、コントローラー、ディレクティブ、フィルター、またはその他のサービスで使用できます。
フィルターMyFormatでサービスを使用します:
<!Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head>フィルター:<h1> {{255 | myformat} </h1> </div> <script> var app = angular.module( 'myApp'、[]); app.service( 'hexafy'、function(){this.myfunc = function(x){return x.tostring(16);}}); function(x){return hexafy.myfunc(x);}]; </script> </body> </html>ランニング効果:
フィルターでサービスを使用します。
ff
オブジェクトの配列で値を取得する場合、フィルターを使用できます。
サービスを作成するhexafy:
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <p>アレイ[255、251、200]値を取得するときにフィルターを使用します:</p> <ul> <li ng-repeat = "x in counts"> {{x | myformat}} </li> </ul> <p>フィルターは、10進数を16進変換するためにサービスを使用します。 </p> </div> <script> var app = angular.module( 'myapp'、[]); app.service( 'hexafy'、function(){this.myfunc = function(x){return x.tosttring(16);}}); app.filter( 'myformat'、[hexafy '、return(x){x) hexafy.myfunc(x);}]; app.controller( 'myctrl'、function($ scope){$ scope.counts = [255、251、200];}); </script> </body> </html>ランニング効果:
配列[255、251、200]の値を取得するときにフィルターを使用します。
フィルターはサービスを使用して、小数を16進数に変換します。
上記は、Angularjsサービスに関する情報の編集です。後で追加し続けます。困っている友達については、それを参照してください。