ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJS_AngularJSでのファクトリーとサービスの使い方の紹介

AngularJS_AngularJSでのファクトリーとサービスの使い方の紹介

WBOY
リリース: 2016-05-16 15:54:33
オリジナル
1115 人が閲覧しました

AngularJS は、サービスを使用したアーキテクチャにおける「懸念の分離」の概念をサポートします。サービスは JavaScript 関数であり、1 つの特定のタスクのみを実行します。これにより、メンテナンスとテストのための別個のエンティティも作成されます。コントローラー、フィルターは、要件の基礎としてそれらを呼び出すことができます。サービスは通常、AngularJS の依存関係注入メカニズムを使用して注入されます。

AngularJS は、$http、$route、$window、$location などの多くの組み込みサービスを提供します。各サービスは特定のタスクを担当します。たとえば、$http は、サーバーからデータを取得するための AJAX 呼び出しを作成するために使用されます。 $routeはルーティング情報などを定義するために使用します。組み込みサービスには常に $ 記号が接頭辞として付けられます。

サービスを作成するには 2 つの方法があります。

  1. 工場
  2. サービス

ファクトリーメソッドを使用する

ファクトリ メソッドを使用して、最初にファクトリを定義し、次にそれにメソッドを割り当てます。

   var mainApp = angular.module("mainApp", []);
   mainApp.factory('MathService', function() {   
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b 
     }
     return factory;
   }); 

ログイン後にコピー

サービスメソッドを使用する

サービス メソッドを使用して、サービスを定義し、メソッドを割り当てます。すでに利用可能なサービスも注入します。

mainApp.service('CalcService', function(MathService){
  this.square = function(a) { 
 return MathService.multiply(a,a); 
 }
});

ログイン後にコピー

次の例は、上記のすべてのコマンドを示しています。
testAngularJS.html



  Angular JS Forms

AngularJS Sample Application

Enter a number:

Result: {{result}}

<script> var mainApp = angular.module(&quot;mainApp&quot;, []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService) { $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script>
ログイン後にコピー

結果

Web ブラウザで textAngularJS.html を開きます。以下の結果をご覧ください。

2015617105555351.jpg (560×429)

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート