angleJSのファクトリとサービス
プロバイダーを使用してサービスを作成することに加えて、AngularJSはビジネスアーキテクチャ（サービス）を通じてアイデアを実装します。 AngularJsは、サービスを作成するための2つの関数を提供します。
- 工場（）
- サービス（）
Mục lục
工場
ファクトリは、検証やビジネスルールなどのタスクを実行する再利用可能な値を返すメソッドであり、ファクトリはコントローラまたはサービスが必要とするときに目的の値を生成します。これらの生成された値は、必要なときにいつでもコントローラーまたはサービスに再利用できます
factory（）メソッドは関数であり、ファクトリオブジェクトを作成してそのオブジェクトを返すため、上記のvalue（）メソッドから生成された値とは異なり、ファクトリはこれを行うために関数を使用します。より複雑です。値の計算などの操作…値を返し、次に値を返し、value（）メソッドと同様に挿入できるロジックを構築します
工場の例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Factory</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script> <style> input, select { margin-bottom: 10px; } </style> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <h1>Calculate total product</h1> Product price: <br /> <input type="number" ng-model="price" /> <br /> Shipping type: <br /> <select ng-model="shippingtype"> <option value="flat">Flat shipping - 10$</option> <option value="custom">Express - custom price</option> </select> <br /> <input type="number" ng-model="shipping" ng-show="shippingtype == 'custom'" /> <br /> <p>Total: {{calculate()}}</p> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.factory("calculateOrderService", function () { //define factory varialble var factory = {}; factory.flatShipping = function (price) { // shipping price value is 10 return price + 10; } factory.customShipping = function (price, shipping) { // shipping price value is 20 return price + shipping; } return factory; }); myApp.controller("myCtrl", function ($scope, calculateOrderService) { $scope.price = 0; $scope.shipping = 0; $scope.total = 0; $scope.shippingtype = "flat"; $scope.calculate = function () { if ($scope.shippingtype == "flat") { $scope.total = calculateOrderService.flatShipping($scope.price); } else { $scope.total = calculateOrderService.customShipping($scope.price, $scope.shipping); } return $scope.total; }; }); </script> </html>サービス
angleJSでは、サービスは、コントローラーに注入できる一連の関数を格納するシングルトンオブジェクトを指します。これらの関数には、サービスがジョブを処理するのに役立つロジックがあります。たとえば、$httpサービスはコントローラーにHTTPを実行するために使用されます。オペレーション
モジュールでサービスを作成するために、AngularJSはservice（）メソッドを提供します。このメソッドを使用して、サービスを定義し、目的のメソッドを割り当てます。サービスには、オブジェクトを作成するためにnew keyという単語を使用するコンストラクター関数（初期化）があります。メソッドとプロパティをその中に入れます。ただし、ファクトリとは異なり、定義後のサービス内では値が返されません。すべてがこれ（オブジェクトコンテキスト自体）を介してサービスに注入されます。サービスは、他のサービス、フィルター、コントローラー、ディレクティブに注入できます。
サービスを介してデータを初期化する例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Service</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <select ng-model="selectedlistOption" ng-change="alertselected()" ng-options="item as item.name for item in listOption track by item.id"> </select> </div> </body> <script> var app = angular.module('myApp', []); app.service('myService', function () { this.optionDefault = {id: 0, name: "Choose nothing"}; this.addListOption = function (listOption) { listOption.unshift(this.optionDefault); }; }); app.controller('myController', function ($scope, myService) { // $scope.selected = ""; $scope.listOption = [ {id: 1, name: "Option 1"}, {id: 2, name: "Option 2"}, {id: 3, name: "Option 3"}, {id: 4, name: "Option 4"}, ]; myService.addListOption($scope.listOption); $scope.selectedlistOption= $scope.listOption[0]; $scope.alertselected = function(){ console.log($scope.selectedlistOption); } }); </script> </html>上記の例では、インジェクションメカニズムを介してサービスを使用して作業を行い、新しく初期化された選択リストにデフォルトの選択オプションを配置し、それをデフォルトの選択として選択します。
サービスと工場の違い
| 違い | 工場 | サービス |
| 関数型（関数型） | 関数として、オブジェクトまたは値を返します | コンストラクター関数であるか、新しい.keywordを介して初期化されます |
| 使用（使用） | 未構成のサービスに使用され、複雑な論理構造でよく使用されます | 単純な論理構造での使用に適しています |
| プロパティ | このキーワードを使用しない定義 | このキーワードを使用する |
| フレンドリーな注入メカニズム | サポートなし | サポート |
| プリミティブ（プリミティブ） | もつ | いいえ |
| 優先選択 | クラスを定義する際の優先順位 | クイックユーティリティを定義するとき、またはES6標準機能を定義するときに優先する |
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
