Inyección de dependencia de AngularJS
¿Qué es la inyección de dependencia?
La explicación del wiki es: la inyección de dependencia (DI) es un patrón de diseño de software en el que se inyectan una o más dependencias (o servicios) (o se pasan por referencia) en un objeto separado (o cliente) y luego se convierten en parte del estado del cliente.
Este patrón separa la creación de comportamientos de dependencia del cliente, lo que hace que la programación se acople libremente y sigue los principios de reversión de la dependencia y la responsabilidad única. En contraste directo con el patrón de localización del servicio, permite al cliente comprender cómo el cliente usa el sistema para encontrar dependencias
En una palabra: si no tienes nada que hacer, no vengas a mí, iré a ti si tienes algo que hacer.
AngularJS proporciona un buen mecanismo de inyección de dependencia. Los siguientes 5 componentes centrales se utilizan como inyección de dependencia:
valor
fábrica
servicio
Proveedor
constante
valor
El valor es un objeto JavaScript simple que pasa valores al controlador (fase de configuración):
var mainApp = angular.module ("mainapp", []); // Cree el objeto de valor "defaultInput" y pase los datos mainapp.value ("defaultInput", 5); ... // inyect "defaultInput" en el controlador mainapp.controller ('calcController', function ($ scope, calcservice, defaultInput) {$ scope.number. CalcService.square ($ scope.number);fábrica
La fábrica es una función que devuelve un valor. Creado cuando el servicio y el controlador requieren.
Por lo general, utilizamos funciones de fábrica para calcular o devolver los valores.
// Definir un módulo var mainapp = angular.module ("mainapp", []); // crea fábrica "MathService" utilizado para multiplicar el producto de dos númerosmainApp.Factory ('MathService', function () {var factory = {}; factory.multy = function (a, b) {return a * b} return factory;}); // inyectar fábrica "MathService" en el servicio MainApp.Service ('CalcService', function (MathService) {this.square = function (a) {return MathService.multiply (a, a);}}); ...Proveedor
En AngularJS, se crean un servicio, fábrica, etc. a través del proveedor (etapa de configuración).
Se proporciona un método de fábrica get () en el proveedor, que se utiliza para devolver el valor/servicio/fábrica.
// Definir un módulo var mainapp = angular.module ("mainapp", []); // crea servicio usando el proveedor Definir un método para calcular el producto de dos números mainapp.config (function ($ show) {$ proporcionar.provider ('mathService', function () {this. $ Get = function () {var factory = {}; factory.mmerT.ming (a, b). B;constante
Constante (constante) se usa para pasar valores numéricos durante la fase de configuración. Tenga en cuenta que esta constante no está disponible durante la fase de configuración.
mainapp.constant ("configParam", "valor constante");
Ejemplo
Los siguientes ejemplos proporcionan una demostración de varios mecanismos de inyección de dependencia anteriores.
<html> <fead> <meta charset = "utf-8"> <title> AngularJS Inyección de dependencia </title> </head> <body> <h2> AngularJS Aplicación simple </h2> <div Ng-app = "mainapp" ng-confontroller = "calcController"> <p> ingrese un número: <input type = "number" ng-mmodel " ng-click = "square ()"> x <up> 2 </sup> </boton> <p> resultado: {{resultado}} </p> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scritch> <scritch> var mainapp = angular []); 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>Resultados de ejecución:
Lo anterior es la clasificación de datos para inyectar dependencias AngularJS. Continuaremos agregándolo más tarde. Espero que pueda ayudar a los amigos que desarrollan angularjs.