A brief discussion of the $injector object in 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.
$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模块下的注入器实例
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
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"]
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);}]);
$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: {}});
$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
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



This article continues the learning of Angular, takes you to understand the metadata and decorators in Angular, and briefly understands their usage. I hope it will be helpful to everyone!

This article will give you an in-depth understanding of Angular's state manager NgRx and introduce how to use NgRx. I hope it will be helpful to you!

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

Do you know Angular Universal? It can help the website provide better SEO support!

With the rapid development of the Internet, front-end development technology is also constantly improving and iterating. PHP and Angular are two technologies widely used in front-end development. PHP is a server-side scripting language that can handle tasks such as processing forms, generating dynamic pages, and managing access permissions. Angular is a JavaScript framework that can be used to develop single-page applications and build componentized web applications. This article will introduce how to use PHP and Angular for front-end development, and how to combine them

This article will share with you an Angular practical experience and learn how to quickly develop a backend system using angualr combined with ng-zorro. I hope it will be helpful to everyone!

How to use monaco-editor in angular? The following article records the use of monaco-editor in angular that was used in a recent business. I hope it will be helpful to everyone!

This article will take you through the independent components in Angular, how to create an independent component in Angular, and how to import existing modules into the independent component. I hope it will be helpful to you!
