Los beneficios de la inyección de dependencia (DI) ya no se discutirán, y aquellos que han usado el marco de primavera lo conocen. Como marco JS en primer plano, AngularJS también proporciona soporte para DI, que es una característica que JavaScript/jQuery no tiene. DI relacionado con angularjs incluye angular.module (), angular.injector (), $ inyector y $ proporcionando. Para un contenedor DI, debe tener tres elementos: registro de servicios, declaración de dependencia y adquisición de objetos. Por ejemplo, en la primavera, el registro del servicio se implementa a través de la etiqueta <Bean> del archivo de configuración XML o la anotación @Repository, @Service, @Controller y @Component; La adquisición del objeto puede implementarse mediante aplicacionesContext.getBean (); La declaración de dependencias se puede configurar en el archivo XML, o se puede declarar en el código Java usando @Resource y otras anotaciones. En Angular, el módulo y $ proporcional son equivalentes al registro del servicio; El inyector se usa para obtener objetos (Angular completará automáticamente la inyección de dependencias); Hay 3 formas de declarar dependencias en Angular. La siguiente es una introducción a la DI angular de estos 3 aspectos.
1. Angular.module () crea, obtiene y registra módulos en angular
Angular.module () es un lugar global para crear, registrar y recuperar módulos angulares. Cuando se pasa dos o más argumentos, se crea un nuevo módulo. Si se pasa solo un argumento, se recupera un módulo existente (el nombre aprobado como el primer argumento en el módulo).
// pasar más de un parámetro significa un nuevo módulo; an empty array means that the module does not rely on other modules var createModule = angular.module("myModule", []);// There is only one parameter (module name), which means to get the module // If the module does not exist, the angular framework will throw an exception var getModule = angular.module("myModule");// true, all of the same module alert(createModule == getModule);Esta función puede crear nuevos módulos u obtener módulos existentes. Si se debe crear u obtener, se distingue por el número de parámetros.
angular.module (nombre, [requiere], [configFn]);
Nombre: Tipo de cadena, que representa el nombre del módulo;
Requiere: una matriz de cadenas, que representa la lista de otros módulos en los que depende el módulo. Si no confía en otros módulos, use una matriz vacía;
configFn: se usa para hacer algunas configuraciones en este módulo.
Ahora sabemos cómo crear y obtener módulos, entonces, ¿cuáles son exactamente los módulos? Solo hay una oración en la Guía oficial del desarrollador: puede pensar en un módulo como un contenedor para las diferentes partes de sus controladores de aplicaciones, servicios, filtros, directivas, etc. No lo entiendo ahora. Significa aproximadamente que un módulo es una colección de algunas funciones, como un todo compuesto de elementos infantiles como controladores, servicios, filtros, instrucciones, etc. No puedo explicarlo ahora, así que lo dejaré atrás primero.
2. La relación entre $ proporcionar y módulo
El servicio $ proporcionar tiene una serie de métodos para registrar componentes con el $ inyector. Muchas de estas funciones también están expuestas a Angular.module.
Como se mencionó anteriormente: el módulo y la proporcional se utilizan para registrar los servicios en inyectores. Verifique la API oficial y puede ver que $ proporciona proporcionar (), constant (), valor (), fábrica () y servicio () para crear servicios de varias naturalezas; Angular.module también proporciona estos 5 métodos de registro de servicios. De hecho, las funciones de los dos son exactamente las mismas, que se utiliza para registrar los servicios con el contenedor DI en el inyector.
Auto bajo la API oficial incluye $ Proporcion y $ inyector, módulo implícito que se agrega automáticamente a cada inyector $. Literalmente, cada inyector tiene estos 2 servicios implícitos. Pero en la versión 1.2.25, siento que no hay forma de obtener el $ proporcional en el inyector. ¿No sé por qué es esto? En términos generales, no necesita mostrar este servicio, solo use la API proporcionada en el módulo.
var inyector = angular.injector (); alert (inyector.has ("$ proporcionar")); // falsealert (injector.has ("$ injector")); // true3. Angular.injector ()
También puede obtener el inyector usando angular.injector (); Pero no está vinculado al módulo. Este enfoque no tiene sentido, es equivalente a crear un contenedor DI vacío, y no hay servicio en él, ¿cómo pueden otros usarlo? La forma correcta es especificar los módulos que deben cargarse al crear el inyector.
// Crear módulo mymodule y registrar el servicio var mymodule = angular.module ('mymodule', []); mymodule.service ('myservice', function () {this.my = 0;}); // Crear módulo HerModule y registrar el servicio var HermModule = Angular.module ('Hermodule',,, ',,,',,, ',,',, ', Hermodule', []); HerModule.Service ('Herservice', function () {this.her = 1;}); // Cargue el servicio var inyector = angular.injector (["mymodule", "hermodule"]); alerta (inyector.get ("myService"). my); alerta (inyector.get ("Herservice"). Her); Her);Si se cargan múltiples módulos, los servicios en múltiples módulos se pueden obtener a través del inyector devuelto. En este ejemplo, si solo se carga mymoudle, el inyector obtenido no puede acceder a los servicios en HermoUdle. Es particularmente importante tener en cuenta aquí: angular.injector () se puede llamar varias veces, y cada vez que devuelve el objeto inyector recién creado.
var inyector1 = angular.injector (["mymodule", "hermodule"]); var inyector2 = angular.injector (["mymodule", "hermodule"]); alerta (inyector1 == inyector2); // falso
4. Tres formas de declarar dependencias en angular
Angular proporciona tres formas de obtener dependencias: inferencia, anotación y métodos en línea.
// Crear módulo mymodule y registrar el servicio var mymodule = angular.module ('mymodule', []); mymodule.service ('myservice', function () {this.my = 0;}); // get injectorVar injuntor = angular.injector (["mymodule"); // the fRIS InferenceInjector.invoke (function (myService) {alert (myservice.my);}); // La segunda función de anotación explícita (serviceA) {alert (service.my);}; explícito. $ inject = ['myservice']; inyector.invoke (explicito); // el tercer tipo de tipo de tipo de inlineInjector.invoke (['myService', function (serviceA) {alert (service.my);}]);Entre ellos, la anotación y los métodos en línea no requieren el nombre del parámetro de función, que se recomienda; El método de inferencia requiere que el nombre del parámetro y el nombre del servicio sean consistentes. Si el código JS está comprimido u ofuscado, entonces habrá problemas con la función y no se recomienda este método.
Lo anterior es una compilación de la información inyectada por la dependencia de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio web!