1. Inyección de dependencia
La inyección de dependencia (DI) es un patrón de diseño de software que trata sobre cómo el código obtiene los recursos en los que depende.
Para una discusión más profunda sobre DI, puede visitar la inyección de dependencia (http://en.wikipedia.org/wiki/dependency_inyection), Inversion of Control (http://martinfowler.com/articles/inyection.html), o puede visitar el libro sobre patrones de diseño de software.
1. Di en pocas palabras (simplemente hablando di)
El objeto o la función solo pueden obtener los recursos de los que dependen de las siguientes tres maneras:
1) Puede crear recursos dependientes a través del nuevo operador.
2) Puede encontrar recursos dependientes a través de variables globales.
3) Los recursos dependientes se pueden pasar a través de los parámetros.
Los dos métodos 1 y 2 no son los mejores, porque codifican las dependencias, lo que hace que no sea imposible modificar las dependencias, pero se volverá más complicado. Esto es especialmente un problema para las pruebas y, por lo general, cuando se realiza de forma independiente, se desea proporcionar dependencias simuladas.
El tercer método es relativamente más factible porque elimina la responsabilidad de localizar dependencias de los componentes. La dependencia se entrega a los componentes.
función someclass (greomeer) {this.greeter = gooder} someclass.prototype.dosomthing = function (name) {this.greeter.greet (name);}En el ejemplo anterior, Someclass no necesita preocuparse por localizar la dependencia del saludador, solo pasa a Saluder en tiempo de ejecución.
Esto es más apropiado, pero deja la responsabilidad de obtener los recursos de dependencia del código responsable de construir Someclass.
Para administrar la responsabilidad de crear dependencias, cada aplicación angular tiene un inyector (http://code.angularjs.org/1.0.2/docs/api/angular.injector). Injector es un localizador de servicios responsable de localizar y crear recursos dependientes.
Solicitar dependencias, resuelve el problema del código duro, pero significa que el inyector debe ejecutarse a través de toda la aplicación. El inyector aprobado destruirá la ley de Demeter (http://baike.baidu.com/view/823220.htm). Para corregir este problema, transferimos la responsabilidad de las búsquedas de dependencia al inyector.
He dicho mucho más arriba. Mire los ejemplos que he modificado a continuación. He fusionado dos ejemplos del texto original, usando inyección dentro y fuera de Angular:
<! Doctype html> <html lang = "zh-cn" ng-app = "mainapp"> <toad> <meta charset = "utf-8"> <title> inyector </title> </head> <fody> <diviv ng-controller = "mycontroller"> <bootin ng-click = " src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> // Cree el módulo OTROMODULE, que es equivalente al módulo externo var otherModule = Angular.module ("OtherModule", []); // Enseñe al inyector cómo crear "saludador" // Tenga en cuenta que el bienvenido en sí mismo debe confiar en $ Window OtherModule.Factory ("saludador", function ($ window) {// Este es un método de fábrica, responsable de crear el servicio de salud return {greet: function (text) {$ window.alert (texto);}};}); // A continuación se muestra que en un módulo no corriente, llame al método de salud a través del inyector: // Crear un nuevo inyector desde el módulo // Este paso generalmente se realiza automáticamente cuando se inicia angular. // Las cosas angulares 'ng' deben introducirse // El orden se invierte deliberadamente, y se confirma temporalmente que el orden de esto no importa. . var inyector = angular.injector (['OtherModule', 'ng']); // Solicitar la dependencia de Greeter. var g = inyector.get ("saludador"); // Llámalo directamente ~ g.greet ("Hola ~ mi pequeño dada ~"); // Esta es la aplicación principal actual, y debe confiar en OtherModule var MainApp = Angular.module ("MainApp", ["OtherModule"]); // Presta atención a los parámetros de la función de definición del controlador, e inyecta directamente $ alcance y saludador aquí. // El servicio de saluda es mainapp.controller ("mycontroller", function mycontroller ($ scope, greeter) {$ scope.sayhello = function () {greeter.greet ("Hola kitty ~~");};}); // ng-Controller ha hecho esto en silencio detrás de escena //injector.instantiate(myController); </script> </body> </html>Tenga en cuenta que debido a que hay un controlador NG, MyController se inicializa, puede cumplir con todas las dependencias de MyController, de modo que MyController no necesita saber la existencia de inyector. Este es el mejor resultado. El código de aplicación simplemente solicita las dependencias que necesita sin manejar el inyector. Este entorno no romperá la ley de Deméter.
2. Anotación de dependencia (comentarios de dependencia, explicando la forma de dependencias)
¿Cómo sabe inyector qué servicio debe inyectarse?
Los desarrolladores de aplicaciones deben proporcionar información de anotación utilizada por el inyector como una solución a las dependencias. Todas las funciones de API existentes en Angular se refieren al inyector, y este es el caso con la API mencionada en cada documento. Aquí hay tres formas equivalentes de anotar nuestro código con la información del nombre del servicio.
1. Inferir dependencias
Esta es la forma más fácil de obtener un recurso dependiente, pero es necesario suponer que el nombre del parámetro de la función es consistente con el nombre del recurso dependiente.
function myController ($ alcance, gooder) {...}El inyector de una función puede adivinar el nombre del servicio que debe inyectarse (FunctionName.ToString (), Regexp) verificando la definición de la función y extrayendo el nombre de la función. En el ejemplo anterior, $ Scope y Greeter son dos servicios que deben inyectarse en la función (los nombres también son los mismos).
Aunque esto es simple, este método no funcionará después de la compresión de la ofuscación de JavaScript, porque se cambiará el nombre del parámetro. Esto hace que este método sea útil solo para el intotipado (método de prueba de simulación de prototipo de usabilidad del producto, http://www.pretotyping.org/, http://tech.qq.com/a/20120217/000320.htm) y aplicaciones de demo.
2. $ Inyect Annotation ($ inyect Comment)
Para permitir que el compresor de script cambie el nombre del método de la función y aún pueda inyectar el servicio correcto, la función debe comentar sobre la dependencia a través de la propiedad $ inyect. La propiedad $ inyect es una matriz de los nombres de los servicios que deben ser inyectados.
var myController = function (renombrado $ alcance, renamedgreeter) {...} // Si lo que depende aquí no está en el módulo actual, todavía no lo reconoce. // primero debe confiar en el módulo correspondiente en el módulo actual. Es similar al ejemplo anterior. Pero no sé si esta es la forma correcta.
MyController. $ Inject = ['$ alcance', 'saludador'];
Debe tener cuidado que el orden de $ inyecte debe ser consistente con el orden de los argumentos declarados por la función.
Este método de anotación es útil para las declaraciones del controlador porque especifica la información de anotación con la función.
3. Anotación en línea (comentarios en línea)
A veces, no es conveniente usar el método de anotación de $ inyección, como al comentar directamente.
Por ejemplo:
somEMODULE.Factory ('saludador', function ($ window) {...;});Debido a que se requieren variables temporales (evite que no pueda usarse después de la compresión), el código se hinchará como:
var greeterFactory = function (renombrado $ window) {...;}; greeterFactory. $ inyect = ['$ window']; somemodule.factory ('gooder', greeterFactory);Debido a esto (Bloat de código), Angular también proporciona un tercer estilo de comentario:
SomEMOdule.Factory ('saludador', ['$ Window', function (renombrado $ Window) {...;}]);Recuerde que todos los estilos de comentarios son equivalentes y se pueden usar en cualquier lugar de una angular que admite la inyección.
3. ¿Dónde puedo usar?
Di está por todo el angular. Por lo general, se usa en métodos de controlador y fábrica.
1. DI en controladores
El controlador es la clase responsable del comportamiento de la aplicación (describiendo). El método de declaración de controlador recomendado es:
var myController = function (DEP1, DEP2) {...} myController. $ inyect = ['DEP1', 'DEP2']; myController.prototype.amethod = function () {...}2. Métodos de fábrica
El método de fábrica es responsable de crear la mayoría de los objetos angulares. Por ejemplo, directiva, servicio, filtro. El método de fábrica está registrado en el módulo. El método de declaración de fábrica recomendado es:
angualar.module ('mymodule', []). config (['Depprovider', function (Depprovider) {...}]). Factory ('ServiceId', ['DepService', function (DepService) {...}]). Directiva ('DirectiveName', ['DepService', function (DepService) {...}]). filtre ('filtername', ['depservice', function (depservice) {...}]);Lo anterior es el resumen de la información de inyección de dependencia de AngularJS. ¡Gracias por su apoyo para este sitio!