AngularJS のプロバイダー間の違いについて話す

#関連チュートリアルの推奨事項: 「

angular チュートリアル」

#プロバイダーとは何ですか?

angularjs

プロバイダーのドキュメント定義: provider は、

$get()

メソッドを持つオブジェクトです。インジェクターは $get メソッドを呼び出して新しいサービス インスタンスを作成します。プロバイダーには、プロバイダーの構成に使用できる他のメソッドもいくつかあります。 AngularJS は

$provide

を使用して新しいプロバイダーを登録します。プロバイダーは基本的に新しいインスタンスを作成しますが、各プロバイダーは 1 回だけ作成されます。 $provide には、カスタム プロバイダーを作成するための 6 つのメソッドが用意されています。簡単なコード例を使用してそれぞれについて説明します。 6 つのメソッドは次のとおりです。

constant

• ##value

• サービス

• ファクトリー

• デコレータ

• プロバイダ

定数

定数はどこにでも注入できます。定数はデコレータによってインターセプトできません。つまり、定数の値は決して変更できません。

var app = angular.module('app', []); 
app.config(function ($provide) {
  $provide.constant('movieTitle', 'The Matrix');
}); 

app.controller('ctrl', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix');
});

AngularJS は定数を作成する簡単な方法を提供します。上記の 3 ～ 5 行のコードを次のように書き換えることができます:

app.constant('movieTitle', 'The Matrix');

Value

value は、文字列、数値、関数など、注入できる単純な値です。 定数との違いは、値を設定に注入できないことですが、値はデコレータによってインターセプトできることです。

var app = angular.module('app', []); 
app.config(function ($provide) {
 $provide.value('movieTitle', 'The Matrix')
});

app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
})

値を作成する簡単な方法:

app.value('movieTitle', 'The Matrix');

Service

Service は、注入できるコンストラクターです。必要に応じて、関数内で必要な依存関係を指定できます。

サービスはシングルトンであり、一度だけ作成されます。サービスは、データの共有など、コントローラー間でデータを転送するための優れた方法です。

var app = angular.module('app' ,\[\]); 
app.config(function ($provide) {
 $provide.service('movie', function () {
   this.title = 'The Matrix';
 });
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});

サービスを作成する簡単な方法:

app.service('movie', function () {
 this.title = 'The Matrix';
});

Factory

factory は注入可能な関数です。

サービスと同じ: ファクトリもシングルトンであり、依存関係もこの関数で指定できます。

違いは、ファクトリーは通常の関数を注入し、AngularJs はこの関数を呼び出し、サービスはコンストラクターを注入することです。

Service は、new を呼び出して新しいオブジェクトを作成するコンストラクターです。ファクトリを使用すると、関数に必要なものを返させることができます。

factory は $get メソッドのみを備えたプロバイダーであることがわかります。

var app = angular.module('app', []); 
app.config(function ($provide) {
 $provide.factory('movie', function () {
   return {
     title: 'The Matrix';
   }
 });
}); 

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});

ファクトリを作成する簡単な方法:

app.factory('movie', function () {
 return {
   title: 'The Matrix';
 }
});

Decorator

Decorator は他のプロバイダーを変更またはカプセル化できますが、定数です。飾ることはできません。

var app = angular.module('app', []); 
app.value('movieTitle', 'The Matrix'); 
app.config(function ($provide) {
 $provide.decorator('movieTitle', function ($delegate) {
   return $delegate + ' - starring Keanu Reeves';
 });
});

app.controller('myController', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});

プロバイダー

プロバイダーは、すべてのプロバイダーの中で最も複雑であり、複雑な作成関数と構成オプションを持つことができます。

provider は実際には構成可能なファクトリーです。プロバイダーはオブジェクトまたはコンストラクターを受け入れます。

var app = angular.module('app', []); 
app.provider('movie', function () {
 var version;
 return {
   setVersion: function (value) {
     version = value;
   },
   $get: function () {
     return {
       title: 'The Matrix' + ' ' + version
     }
   }
 }
});

app.config(function (movieProvider) {
 movieProvider.setVersion('Reloaded');
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix Reloaded');
});

概要

すべてのプロバイダーはインスタンス化されるのは 1 回だけなので、すべてシングルトンです。

定数を除き、他のプロバイダーを装飾できます。

Constant はどこにでも注入できる値であり、その値は変更できません。

value は単純な注入可能な値です。

service は注入可能なコンストラクターです。

factory は注入可能な関数です。

Decorator は、定数を除く他のプロバイダーを変更またはカプセル化できます。

provider は構成可能なファクトリーです。

英語の元のアドレス: https://xebia.com/blog/differences-between-providers-in-angularjs/

関連する推奨事項:

プログラミング教育

以上がAngularJS のプロバイダー間の違いについて話すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。