ホームページ > ウェブフロントエンド > jsチュートリアル > Angular の $injector オブジェクトについての簡単な説明

Angular の $injector オブジェクトについての簡単な説明

青灯夜游
リリース: 2021-05-20 09:52:05
転載
2473 人が閲覧しました

この記事では、Angular 依存関係注入オブジェクト $injector について学びましょう。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular の $injector オブジェクトについての簡単な説明

$injector は実際には、.module() と $provide を通じて作成した多くのモジュールとサービスを含む IOC コンテナです。 $injector サービスは、依存関係インジェクター オブジェクトへのアクセスを提供します。もちろん、angular.injector() を呼び出してインジェクターを取得することもできます。 [関連する推奨事項: "angular チュートリアル"]

var injector1 = angular.injector(["myModule","herModule"]); //获得myModule和herModule模块下的注入器实例
ログイン後にコピー

angular.injector() は複数回呼び出すことができ、そのたびに新しく作成されたインジェクター オブジェクトが返されるため、myInjector と angular自動的に作成されました 作成された $injector は同じオブジェクトではありません。

    var injector1 = angular.injector(["myModule","herModule"]);  
    var injector2 = angular.injector(["myModule","herModule"]);  
      
    alert(injector1 == injector2);//false
ログイン後にコピー

$injector の一般的に使用されるメソッド

$injector.get('serviceName') および $injector を通じて、名前に基づいてサービスのインスタンスを取得します。 .annotate('xxx' ) は、xxx のすべての依存関係を取得します。

var app = angular.module("myApp",[]);
  app.factory("hello1",function(){
    return {
      hello:function(){
        console.log("hello1 service");
      }
    }
  });
  app.factory("hello2",function(){
    return {
      hello:function(){
        console.log("hello2 service");
      }
    }
  });
 
  var $injector = angular.injector(['myApp']);
  console.log(angular.equals($injector.get('$injector'),$injector));//true
  var myCtrl2 = function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = ['hello1','hello2'];
  app.controller("myCtrl2", myCtrl2);
  console.log($injector.annotate(myCtrl2));//["$scope","hello1","hello2"]
ログイン後にコピー

angular で依存関係を宣言する 3 つの方法

.controller() 関数を使用すると、$controller サービスが呼び出されます。 Bottom では、コントローラーは $injector サービスの invoke() 関数を使用して作成されます。関数 invoke() は、コントローラーに渡す必要があるパラメーターを分析し、関数を実行する役割を担います。そのため、最下層が実際に宣言されます。以下の3つの方法で信頼してください。

    // 创建myModule模块、注册服务  
    var myModule = angular.module('myModule', []);  
    myModule.service('myService', function() {  
                this.my = 0;  
    });  
      
    // 获取injector  
    var injector = angular.injector(["myModule"]);  
      
    // 第一种inference(推断)
    injector.invoke(function(myService){alert(myService.my);});  
      
    // 第二种annotation (注入)
    function explicit(serviceA) {alert(serviceA.my);};  
    explicit.$inject = ['myService'];  
    injector.invoke(explicit);  
      
    // 第三种inline  (内联)
    injector.invoke(['myService', function(serviceA){alert(serviceA.my);}]);
ログイン後にコピー

$scope object

$scope はローカルでサービスではないため、Angular での使用方法はサービスでの使用方法とは異なります。 $scope 変数を正しく挿入します。以下は理論的な実践です:

 $injector.invoke(function ($scope, $http) {
  	//在这里使用$scope,$http
  },
  null,
  {$scope: {}});
ログイン後にコピー

$rootScope object

$rootScope は、angularJS がモジュールをロードするときに自動的に作成されます。ルートスコープが 1 つあります。 rootScope が作成されると、サービスの形式で $injector に追加されます。つまり、モジュールのルート スコープは $injector.get("$ rootScope ") を通じて取得できます。

// 新建一个模块
var module = angular.module("app",[]);
 
// true说明$rootScope确实以服务的形式包含在模块的injector中
var hasNgInjector = angular.injector(['app','ng']);  
console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true
 
// 获取模块相应的injector对象,不获取ng模块中的服务
// 不依赖于ng模块,无法获取$rootScope服务
var noNgInjector = angular.injector(['app']);
console.log("no $rootScope=" + noNgInjector.has("$rootScope"));//false
 
// 获取angular核心的ng模块
var ngInjector = angular.injector(['ng']);  
console.log("ng $rootScope=" + ngInjector.has("$rootScope"));//true
ログイン後にコピー

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

以上がAngular の $injector オブジェクトについての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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