浅谈Angular中的$injector对象
本篇文章和大家一起了解一下Angular依赖注入对象$injector。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
$injector其实是一个IOC容器,包含了很多我们通过.module()和$provide创建的模块和服务。$injector服务提供了对依赖注入器对象的访问,当然我们也可以调用angular.injector()来获得注入器。【相关推荐:《angular教程》】
var injector1 = angular.injector(["myModule","herModule"]); //获得myModule和herModule模块下的注入器实例
angular.injector()可以调用多次,每次都返回新建的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中三种声明依赖的方式
在我们使用.controller()函数的时候,会调用$controller服务,而在底层,则将使用$injector服务的invoke()函数创建该控制器,函数invoke()将负责分析什么参数需要被传入controller中,并执行该函数,所以底层实际上是使用了以下三种方式声明依赖。
// 创建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对象
因为$scope是局部的,不是一个服务,所以Angular使用它的方式和服务的方式不同,为了正确注入$scope变量,下面是一个理论上实践:
$injector.invoke(function ($scope, $http) { //在这里使用$scope,$http }, null, {$scope: {}});
$rootScope对象
$rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScope。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
更多编程相关知识,请访问:编程视频!!
Atas ialah kandungan terperinci 浅谈Angular中的$injector对象. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel ini meneruskan pembelajaran Angular, membawa anda memahami metadata dan penghias dalam Angular, dan memahami secara ringkas penggunaannya, saya harap ia akan membantu semua orang.

Angular.js ialah platform JavaScript yang boleh diakses secara bebas untuk mencipta aplikasi dinamik. Ia membolehkan anda menyatakan pelbagai aspek aplikasi anda dengan cepat dan jelas dengan memanjangkan sintaks HTML sebagai bahasa templat. Angular.js menyediakan pelbagai alatan untuk membantu anda menulis, mengemas kini dan menguji kod anda. Selain itu, ia menyediakan banyak ciri seperti penghalaan dan pengurusan borang. Panduan ini akan membincangkan cara memasang Angular pada Ubuntu24. Mula-mula, anda perlu memasang Node.js. Node.js ialah persekitaran berjalan JavaScript berdasarkan enjin ChromeV8 yang membolehkan anda menjalankan kod JavaScript pada bahagian pelayan. Untuk berada di Ub

Artikel ini akan memberi anda pemahaman yang mendalam tentang pengurus negeri Angular NgRx dan memperkenalkan cara menggunakan NgRx saya harap ia akan membantu anda!

Bagaimana untuk menggunakan monaco-editor dalam sudut? Artikel berikut merekodkan penggunaan monaco-editor dalam sudut yang digunakan dalam perniagaan baru-baru ini. Saya harap ia akan membantu semua orang!

Adakah anda tahu Angular Universal? Ia boleh membantu tapak web menyediakan sokongan SEO yang lebih baik!

Artikel ini akan berkongsi dengan anda pengalaman praktikal Angular dan mempelajari cara membangunkan sistem bahagian belakang dengan cepat menggunakan angualr digabungkan dengan ng-zorro. Saya harap ia akan membantu semua orang.

Dengan perkembangan pesat Internet, teknologi pembangunan bahagian hadapan juga sentiasa bertambah baik dan berulang. PHP dan Angular ialah dua teknologi yang digunakan secara meluas dalam pembangunan bahagian hadapan. PHP ialah bahasa skrip sebelah pelayan yang boleh mengendalikan tugas seperti memproses borang, menjana halaman dinamik dan mengurus kebenaran akses. Angular ialah rangka kerja JavaScript yang boleh digunakan untuk membangunkan aplikasi satu halaman dan membina aplikasi web berkomponen. Artikel ini akan memperkenalkan cara menggunakan PHP dan Angular untuk pembangunan bahagian hadapan, dan cara menggabungkannya

Projek Angular terlalu besar, bagaimana untuk membahagikannya secara munasabah? Artikel berikut akan memperkenalkan kepada anda cara membahagikan projek Angular secara munasabah. Saya harap ia akan membantu anda!
