ホームページ > ウェブフロントエンド > jsチュートリアル > Angular でサービスを作成するにはどうすればよいですか?見極める5つの方法!

Angular でサービスを作成するにはどうすればよいですか?見極める5つの方法!

青灯夜游
リリース: 2021-05-10 10:42:34
転載
2879 人が閲覧しました

この記事では、Angular サービスを作成する 5 つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular でサービスを作成するにはどうすればよいですか?見極める5つの方法!

config 構成ブロック

Angular アプリケーションの実行は、主に app.config() と app.config() の 2 つの部分に分かれています。 run( ), config は、アプリケーションが正しいサービスを使用できるようにプロバイダーをセットアップする段階です。構成ブロックに挿入できるのはプロバイダーのみであることに注意してください ($provide と $injector の 2 つの例外のみ)。また、プロバイダーは構成内でのみ挿入できます。 Angular がサービスを挿入する 5 つの方法のうち、構成に依存できるのは、プロバイダーと定数を介して挿入されたサービスのみです。

app.controller('MyController', function ($httpProvider) {
	//错误,无法在控制器中注入服务提供者
});
app.config(function ($http) {
	//错误,配置块中只能注入服务
});
ログイン後にコピー

関連する推奨事項: "angularjs チュートリアル"

一部の組み込みサービスについて

コントローラー関数を挿入できます。 , ただし、コントローラー自体を何かに挿入することはできません。ただし、コントローラーのセットアップを担当する $controller と呼ばれる組み込みの AngularJS サービスがあります。myMod.controller(...) を呼び出すとき、実際にはプロバイダーです本サービスにアクセスした方。

コード:

myMod.controller('MainController', function($scope) {
  // ...
});
ログイン後にコピー

実際には次のことを行います:

myMod.config(function($controllerProvider) {
  $controllerProvider.register('MainController', function($scope) {
// ...
  });
});
ログイン後にコピー

フィルターとディレクティブと同様に、フィルターは $filter というサービスとそのプロバイダー $filterProvider、およびディレクティブを使用します。 $compile というサービスとそのプロバイダ $compileProvidr を使用します。

サービスの 5 つの注入メソッド

factory()

依存関係インジェクターはファクトリー関数を使用してインスタンスを作成しますservice の場合、ファクトリ関数はオブジェクトを返します。

myModule.factory('myService', function () {
	var myService = {};
	//添加myService的一些属性和方法
	return myService;
});
ログイン後にコピー

service()

サービス インジェクションは関数をサービスに渡し、JavaScript の新しい操作を使用してサービスを生成します。つまり、アタッチします。これは、実行関数自体を指すとは限らず、トップレベルのオブジェクト ウィンドウを指す場合もあります。

myModule.service('myService', function () {
	this.foo = 'bar';
});
ログイン後にコピー

provider()

実際、上記のファクトリとサービスはプロバイダー上の糖衣構文として実装されており、プロバイダーを通じて注入されるサービスは次のようになります。プロバイダーとして使用 構成ブロックで使用する場合、プロバイダーは $get 属性を実装する必要があります。

myMod.provider('greeting', function() {
  var text = 'Hello, ';

  this.setText = function(value) {
     text = value;
  };

  this.$get = function() {
     return function(name) {   //$get必须实现,可以返回一个函数或者一个对象
         alert(text + name);
     };
  };
});

myMod.config(function(greetingProvider) {
  greetingProvider.setText("Howdy there, ");
});

myMod.run(function(greeting) {
  greeting('Ford Prefect');
});
ログイン後にコピー

constant(name,value)

constant は主に定数を登録するために使用されます。value は値または json オブジェクトです。通常、この定数は主に設定に使用されます頻繁に使用される、常に設定されているサービスのデータを config に注入できます。

angular.module('myApp', [])
.constant('apiKey', '123123123')
.config(function(apiKey) {
// 在这里apiKey将被赋值为123123123
// 就像上面设置的那样
})
ログイン後にコピー

value(name,value)

value は主に、使用するデータまたはメソッドを保存するために使用されます。このデータまたはメソッドを変更する必要がある場合は、value を使用してくださいサービスを作成するには、パラメータ値は値または json オブジェクトです。さらに、設定では信頼できません。

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});
ログイン後にコピー

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 !

以上がAngular でサービスを作成するにはどうすればよいですか?見極める5つの方法!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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