AngularJsに依存性注入を実装する方法

このアーティルは、AngularJsで依存性注入を実装する方法の詳細で包括的な知識を提供します。

依存性注入は、コンポーネントが依存関係を保持する方法を指定するソフトウェアデザインパターンです。コンポーネントには、ハードコーディングする代わりに依存関係が与えられます。依存性注入を使用することで、再利用性と保守性を実現できます。の最高の依存性注入 次のコンポーネントで実行できます。





値の依存性注入

AngularJsの単純なオブジェクトは値として知られています。文字列、数値、またはJavaScriptオブジェクトにすることができます。実行および構成フェーズで、ファクトリ、サービス、またはコントローラに値を渡すために使用できます。

例:



//モジュールを定義する

var firstModule = angle.module( 'firstModule'、[])

//値オブジェクトを作成してデータを渡します



firstModule.value( 'numberValue'、50)

firstModule.value( 'stringValue'、 'xyz')

jqueryとjavascriptの違い

firstModule.value( 'objectValue'、{val1:456、val2: 'xyz'})

この例では、value()関数を使用して値を定義しています。値の名前は最初のパラメーターで指定され、2番目のパラメーターは値を指定します。これにより、ファクトリ、サービス、およびコントローラは、名前自体でこれらの値を参照できます。

値を注入する

値と同じ名前のパラメーターを追加することで、AngularJsコントローラー関数に値を挿入できます。

例:

var firstModule = angle.module( 'firstModule'、[])

firstModule.value( 'numberValue'、18)

firstModule.controller( 'FirstController'、function($ scope、numberValue){

console.log(numberValue)

})

ファクトリーインジェクション

値を作成する関数は、ファクトリと呼ばれます。サービスまたはコントローラーがファクトリから注入された値を必要とするときはいつでも、オンデマンドの値がファクトリによって作成されます。値が作成されると、すべてのサービスとコントローラーで再利用されます。

ファクトリ関数を使用して、値を計算して返します。

例:

var firstModule = angle.module( 'firstModule'、[])

firstModule.factory( 'firstFactory'、function(){

'値'を返す

})

firstModule.controller( 'FirstController'、function($ scope、firstFactory){

console.log(firstFactory)

})

工場に値を注入する

次の方法で値をファクトリに注入できます。

var firstModule = angle.module( 'firstModule'、[])

firstModule.value( 'numberValue'、29)

firstModule.controller( 'FirstController'、function($ scope、numberValue){

console.log(numberValue)

})

値は注意する必要がありますファクトリ関数自体ではなく、ファクトリ関数によって生成されたものが注入されます。 AngularJsでの依存性注入のこの記事に進みましょう。

AngularJsでのサービスインジェクション

関数のセットを含むシングルトンJavaScriptオブジェクトは、AngularJsではサービスと呼ばれます。サービスが実行するために必要なロジックは、関数に含まれています。モジュールのservice()関数を使用して、サービスを作成できます。

例:

//モジュールを定義する

var firstApp = angle.module( 'firstApp'、[])

..。

//メソッドを定義するサービスを作成します 数値の2乗を返すsquare

firstApp.service( 'CalciService'、function(MathService){

this.square = function(x){

MathService.multiply(x、x)を返します

}

})

//サービス「CalciService」をコントローラーに挿入します

firstApp.controller( 'CalciController'、function($ scope、CalciService、

defaultInput){

$ scope.number = defaultInput

$ scope.result = CalciService.square($ scope.number)

$ scope.square = function(){

$ scope.result = CalciService.square($ scope.number)

}

})

プロバイダー

構成フェーズでサービスまたはファクトリを内部的に作成するために、プロバイダーを利用します。プロバイダーは、値/サービス/ファクトリを返すために使用されるget()関数を持つ特別なファクトリメソッドです。

例:

//モジュールを定義する

var firstApp = angle.module( 'firstApp'、[])

..。

//メソッドスクエアを定義するプロバイダーを使用してサービスを作成し、

数の二乗。

firstApp.config(function($ Provide){

$ Provided.provider( 'MathService'、function(){

this。$ get = function(){

var factory =

factory.multiply = function(x、y){

x * yを返す

}

工場を返す

}

})

})

絶え間ない

ユーザーはmodule.config()関数に値を挿入できないため、定数を使用します。定数は、構成フェーズで値を渡すために使用されます。

firstApp.constant( 'configParam'、 'constant value')

例:

上記のディレクティブは、次の方法で使用できます。

依存性注入

AngularJSSquaringの例

Javaでシングルトンクラスを作成する方法

任意の番号を入力してください:

バツ2

結果:{{result}}

var firstApp = angle.module( 'firstApp'、[])

firstApp.config(function($ Provide){

$ Provided.provider( 'MathService'、function(){

this。$ get = function(){

var factory =

factory.multiply = function(x、y){

x * yを返す

}

工場を返す

}

})

})

firstApp.value( 'defaultInput'、6)

firstApp.factory( 'MathService'、function(){

var factory =

factory.multiply = function(x、y){

x * yを返す

}

工場を返す

})

firstApp.service( 'CalciService'、function(MathService){

this.square = function(x){

MathService.multiply(x、x)を返します

}

})

phpは文字列を配列に解析します

firstApp.controller( 'CalciController'、function($ scope、CalciService、defaultInput){

$ scope.number = defaultInput

$ scope.result = CalciService.square($ scope.number)

$ scope.square = function(){

$ scope.result = CalciService.square($ scope.number)

}

})

出力:

anglejsでの依存性注入

これで、AngularJsのこの依存性注入の記事は終わりです。 C 一体 25万人以上の満足した学習者のネットワークを持つ信頼できるオンライン学習会社であるEdurekaが世界中に広がっています。

質問がありますか? AngularJsのこの依存性注入のコメントセクションでそれについて言及してください。折り返しご連絡いたします。