La inyección de dependencia es un patrón de diseño de software dado en un componente que reemplaza la codificación de sus dependencias dentro de un componente duro. Esto reduce un componente de las dependencias de posicionamiento, la configuración de dependencia. Esto ayuda a que los componentes sean reutilizables, mantenidos y probados.
AngularJS proporciona un mecanismo de inyección de dependencia suprema. Proporciona un componente central inyectable que depende entre sí.
valor
fábrica
Atender
Proveedor
Siempre
valor
Los valores son objetos JavaScript simples que se utilizan para pasar valores durante los controladores de fase de configuración.
// Definir un modulevar mainapp = angular.module ("mainapp", []); // crea un objeto de valor como "defaultInput" y pasa un data.mainapp.value ("defaultInput", 5); ... // inyect el valor en el controlador usando su nombre "Default" MainApp.Controller ('CalcController', function ($ scope, calcope, calcope, valiente predeterminado) "Default" Mainpp.Controller ('CalcController', function ($ scope, calcope, calcope, valiente predeterminado) ", predeterminado)", "CalcController", function ($ scope, calcope, calcope, valor predeterminado "predeterminado"). $ scope.number = defaultInput;fábrica
La fábrica se usa para devolver el valor de la función. Crea valor según la demanda, cada vez que un servicio o controlador lo necesite. Por lo general, utiliza una función de fábrica para calcular y devolver el valor correspondiente
// Definir un modulevar mainapp = angular.module ("mainapp", []); // crea una fábrica "mathService" que proporciona un método multiplica para devolver la multiplicación de dos númerosmainapp.factory ('mathService', function () {var factory = {}; factory.multIly = function (a, b) {return a * bing factory;};};};};};}; // inyectar la fábrica "MathService" en un servicio para utilizar el método de multiplicación de fábrica.mainapp.service ('calcService', function (mathService) {this.square = function (a) {return MathService.multIly (a, a);}}); ...Atender
Un servicio es un solo JavaScript que contiene un conjunto de objetos de función para realizar ciertas tareas. El servicio utiliza la función Service () e inyecta en la definición del controlador.
// Defina un modulevar mainapp = angular.module ("mainapp", []); ... // crea un servicio que define un método cuadrado para devolver un cuadrado de un número.mainapp.service ('calcservice', function (mathService) {this.square = function (a) {return MathService.multiply (a, a);}}); el controlermainapp.controller ('calcController', function ($ scope, calcService, defaultInput) {$ scope.number = defaultinput; $ scope.result = calcService.square ($ scope.number); $ scope.square = function () {$ scope.result = calcService.square ($ scope.number);});Proveedor
El proveedor utiliza el servicio, fábrica, etc. durante la fase de configuración del proceso de creación interna de AngularJS (como durante el arranque AngularJS en sí). Los scripts mencionados a continuación se pueden usar para crear, hemos creado MathService de antemano. El proveedor es un método especial de fábrica y get () método para devolver el valor/servicio/fábrica.
// Defina un modulevar mainapp = angular.module ("mainapp", []); ... // crea un servicio usando un proveedor que define un método cuadrado para devolver un cuadrado de un número.mainapp.config (function ($ proporcion) {$ show.provider ('MathService', function () {this. $ get = function () {var factory = {}; fechin {return a * b;constante
Las constantes se utilizan para considerar los hechos configurando los valores de fase, los valores no se pueden pasar durante la fase de configuración.
mainapp.constant ("configParam", "valor constante");
ejemplo
Los siguientes ejemplos mostrarán todas las instrucciones anteriores.
testangularjs.html
<html> <fead> <title> Angularjs Dependency Inyection </title> </head> <body> <h2> Angularjs Aplicación de muestra </h2> <div Ng ng-app = "mainapp" ng-confontroller = "calcController"> <p> Ingrese un número: <input type = "number" ng-model = "número"/> <botón <button " ng-chick = "Square ()"> x <up> 2 </sup> </boton> <p> resultado: {{resultado}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularJS/1.2.15/angular.min.js"> </script> <script> <script> angular.module ("mainapp", []); MainApp.Config (function ($ proporcion) {$ proporcionar.provider ('mathService', function () {this. $ get = function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} return fábrica;};});}); }); MainApp.Value ("defaultInput", 5); MainApp.Factory ('MathService', function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} return factory;}); MainApp.Service ('CalcService', function (MathService) {this.square = function (a) {return MathService.multiply (a, a);}}); mainapp.controller ('calcController', function ($ scope, calcService, defaultInput) {$ scope.number = defaultInput; $ scope.result = calcService.square ($ scope.number); $ scope.square = function () {$ scope.result = calcService.square ($ scope.number); </script> </body> </html>resultado
Abra textangularjs.html en un navegador web. Los resultados son los siguientes.
Lo anterior es la recopilación de información para la inyección de dependencia de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!