Table of Contents
Commonly used methods of $injector
Three ways to declare dependencies in angular
$scope object
$rootScope object
Home Web Front-end JS Tutorial A brief discussion of the $injector object in Angular

A brief discussion of the $injector object in Angular

May 20, 2021 am 09:52 AM
angular

In this article, let’s learn about Angular Dependency injection object $injector. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A brief discussion of the $injector object in Angular

$injector is actually an IOC container that contains many modules and services we create through .module() and $provide. The $injector service provides access to the dependency injector object. Of course, we can also call angular.injector() to obtain the injector. [Related recommendation: "angular tutorial"]

var injector1 = angular.injector(["myModule","herModule"]); //获得myModule和herModule模块下的注入器实例
Copy after login

angular.injector() can be called multiple times, and each time it returns a newly created injector object, so the myInjector and angular we created automatically The $injector created is not the same object.

    var injector1 = angular.injector(["myModule","herModule"]);  
    var injector2 = angular.injector(["myModule","herModule"]);  
      
    alert(injector1 == injector2);//false
Copy after login

Commonly used methods of $injector

Get the instance of the service based on the name through $injector.get('serviceName'), and through $injector.annotate('xxx' ) to get all dependencies of 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"]
Copy after login

Three ways to declare dependencies in angular

When we use the .controller() function, the $controller service will be called, and at the bottom , the controller will be created using the invoke() function of the $injector service. The function invoke() will be responsible for analyzing what parameters need to be passed into the controller and executing the function, so the bottom layer is actually declared in the following three ways. rely.

    // 创建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);}]);
Copy after login

$scope object

Because $scope is local and not a service, the way Angular uses it is different from the way the service uses it. In order to inject $scope correctly Variables, the following is a theoretical practice:

 $injector.invoke(function ($scope, $http) {
  	//在这里使用$scope,$http
  },
  null,
  {$scope: {}});
Copy after login

$rootScope object

$rootScope is automatically created when angularJS loads a module. Each module will only have 1 rootScope. Once rootScope is created, it will be added to $injector in the form of a service. That is to say, the root scope of a module can be obtained through $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
Copy after login

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion of the $injector object in Angular. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Let's talk about metadata and decorators in Angular Let's talk about metadata and decorators in Angular Feb 28, 2022 am 11:10 AM

Let's talk about metadata and decorators in Angular

How to install Angular on Ubuntu 24.04 How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

How to install Angular on Ubuntu 24.04

Detailed explanation of angular learning state manager NgRx Detailed explanation of angular learning state manager NgRx May 25, 2022 am 11:01 AM

Detailed explanation of angular learning state manager NgRx

A brief analysis of how to use monaco-editor in angular A brief analysis of how to use monaco-editor in angular Oct 17, 2022 pm 08:04 PM

A brief analysis of how to use monaco-editor in angular

An article exploring server-side rendering (SSR) in Angular An article exploring server-side rendering (SSR) in Angular Dec 27, 2022 pm 07:24 PM

An article exploring server-side rendering (SSR) in Angular

What should I do if the project is too big? How to split Angular projects reasonably? What should I do if the project is too big? How to split Angular projects reasonably? Jul 26, 2022 pm 07:18 PM

What should I do if the project is too big? How to split Angular projects reasonably?

Let's talk about how to customize the angular-datetime-picker format Let's talk about how to customize the angular-datetime-picker format Sep 08, 2022 pm 08:29 PM

Let's talk about how to customize the angular-datetime-picker format

Angular + NG-ZORRO quickly develop a backend system Angular + NG-ZORRO quickly develop a backend system Apr 21, 2022 am 10:45 AM

Angular + NG-ZORRO quickly develop a backend system

See all articles