ホームページ > ウェブフロントエンド > jsチュートリアル > angularjs にはサービスがいくつありますか? angularjs でのサービスの詳細な分析

angularjs にはサービスがいくつありますか? angularjs でのサービスの詳細な分析

寻∝梦
リリース: 2018-09-08 16:51:37
オリジナル
1333 人が閲覧しました

この記事では主に angularjs のいくつかのサービスの詳細な分析について説明します。 angularjs サービスの使い方と違いについても紹介していますので、一緒にこの記事を見てみましょう

全体の紹介

適切に階層化された Angular アプリケーションでは、コントローラー層は非常に薄くなければなりません。つまり、アプリケーション内のほとんどのビジネス ロジックと永続データはサービスに配置する必要があります。

このため、AngularJS の複数のプロバイダー間の違いを理解する必要があります。
プロバイダーによって作成された新しいサービスをインジェクションに使用できます。含まれるもの:

  • プロバイダ

  • 工場

  • サービス

  • 定数

  • 価値

提供は、2 つの部分で構成される構成可能なサービスを生成するために使用されます。最初の部分の変数と関数は app.config 関数でアクセスでき、他の場所でアクセスする前に変更できます。定義は次のとおりです:

app.provider('myProvider', function(){
    var a = '';    var func = function(){};
})
ログイン後にコピー

app.config 関数の a を変更します。これは、このような単純なファクトリーがある場合にプロバイダーが使用される理由でもあります:

app.config(function(myProviderProvider){
    myProvider.a = 'hello world';
})
ログイン後にコピー

2 番目の部分の変数と関数は $get を使用します。 () 関数が返すものには、プロバイダーを通過する任意のコントローラーでアクセスできます。

app.provider('myProvider', function(){
    this.$get = function(){
        return {
            foo: function(){},
            a: a
        }
    }
})
ログイン後にコピー

factory

factory はオブジェクトを返します。オブジェクトを作成し、それにプロパティを追加して、オブジェクトを返すだけです。コントローラーにファクトリを挿入して、そのすべてのプロパティを使用します。

app.factory('myFactory', function(){
    var fac = {};
    fac.a = 'hello world';
    fac.foo = function(){};    return fac;
})
ログイン後にコピー

factoryの第二引数がプロバイダーの$getに相当する関数実装であることがわかります。

service

service はコンストラクターに似ており、new キーワードを通じてオブジェクトをインスタンス化し、サービス オブジェクトが作成されるとこれが戻り値として返されます。

app.service('myService', function(){
    var a = '';    this.setA = function(){};    this.getA = function(){};    this.foo = function(){};
})
ログイン後にコピー

myService に挿入されたコントローラーは、myService でこれにバインドされている 3 つのメソッド setA()、getA()、および foo() にアクセスできます。

constant

constant は定数を定義するために使用され、一度定義すると変更できません。どこにでも注入できますが、デコレータによって装飾することはできません。

app.constant('APP_KEY', 'a1s2d3f4')
ログイン後にコピー

value

定数と同様に、値を定義するために使用できます。ただし、定数との違いは、変更したり、デコレーターによって装飾したりできるが、構成に挿入できないことです。

app.value('version', '1.0')
ログイン後にコピー

value は通常、アプリケーションの初期値を設定するために使用されます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの

AngularJS 開発マニュアル

列にアクセスして学習してください)

decorator は特別であり、プロバイダーではありません。ソース コードからわかるように、定数は Provider() メソッドを通じて作成されないため、定数を除く他のプロバイダーを修飾するために使用されます。

以下は、デコレータを使用して値を装飾する例です。

app.value('version', '1.0');
app.decorator('version', function ($delegate) {
    return $delegate + '.1';
})
ログイン後にコピー

次に、以前の myService サービスを使用したいが、必要な挨拶機能が欠けている場合。サービスを変更することはできますか?答えはいいえだ!ただし、装飾することはできます:

app.decorator('myService', function($delegate){
    $delegate.greet = function(){
        return "Hello, I am a new function of 'myService'";
    }
})
ログイン後にコピー

$delegate は実際のサービス インスタンスを表します。

サービスを装飾する機能は、特にサードパーティのサービスを使用する場合に非常に実用的です。現時点ではコードをプロジェクトにコピーする必要はなく、いくつかの変更を加えるだけで済みます。

ファクトリーの代わりにプロバイダーを使用する場合は?


プロバイダーはファクトリーの拡張バージョンです。構成可能なファクトリーが必要な場合は、プロバイダーを使用します。

AngularJS でアプリケーションを実行するプロセスを簡単に紹介すると、構成ステージと実行ステージの 2 つのステージに分かれています。構成フェーズでは、プロバイダーがセットアップされます。これは、ディレクティブ、コントローラー、フィルターなどが設定される段階でもあります。実行フェーズ中に、AngularJS は DOM をコンパイルし、アプリケーションを開始します。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

AngularJS ユーザー マニュアル

の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がangularjs にはサービスがいくつありますか? angularjs でのサービスの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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