依赖注入 AngularJS

La inyección de dependencias es un diseño de software donde se proporciona la relevancia a los componentes en lugar de codificarlos directamente en los componentes. Esto hace que los componentes no necesiten buscar dependencias y hace que las dependencias sean configurables. También ayuda a hacer que los componentes sean reutilizables, mantenibles y testables.

AngularJS proporciona el mecanismo de inyección de dependencias más alto. Proporciona los siguientes componentes nucleares, que pueden inyectarse entre sí como dependencias.

Value
Factory
Service
Provider
Constant

Value - Valor

El valor es un objeto JavaScript simple que se necesita transmitir al controlador en la fase de configuración (la fase de configuración es cuando AngularJS guía a sí mismo).

//定义模块
var mainApp = angular.module("mainApp", []);
//Crear un objeto de valor como "defaultInput" y pasarle datos. "defaultInput" y pasarle datos.
mainApp.value("defaultInput",　5);
...
//Inyectar el valor con el nombre "defaultInput" al controlador "defaultInput"
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);
　　　}
});

Factory - Fábrica

La fábrica es una función para devolver valores. Cada vez que el servicio o el controlador necesiten, se crean valores a demanda. Generalmente utiliza la función de fábrica para calcular y devolver valores.

//定义模块
var mainApp = angular.module("mainApp", []);
//Crear una fábrica "MathService" que proporcione un método de multiplicación para devolver el producto de dos números.
mainApp.factory('MathService', function() {
　　　var factory = {};
　　　
　　　factory.multiply = function(a, b) {
　　　　　　return a　*　b
　　　}
　　　return factory;
});　
//Inyectar la fábrica "MathService" en el servicio para utilizar el método de multiplicación de la fábrica.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);
　　　}
});
...

Service - Servicio

El servicio (Service) es un objeto JavaScript singleton que contiene un conjunto de funciones para ejecutar ciertas tareas. Utiliceservice()Definir el servicio y luego inyectarlo en el controlador.

//定义模块
var mainApp = angular.module("mainApp", []);
...
//Crear un servicio que defina un método para devolver el cuadrado de un número.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);　
　　　}
});
//将服务“CalcService”注入控制器"CalcController"
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);
　　　}
});

Provider

AngularJS内部使用提供程序在配置阶段创建服务，工厂等。以下脚本可用于创建我们之前创建的MathService。Provider是一种特殊的工厂方法，其get()方法用于返回value/service/factory。

//定义模块
var mainApp = angular.module("mainApp", []);
...
//使用提供程序创建服务，该提供程序定义一个方法平方以返回数字的平方。
mainApp.config(function($provide) {
　　　$provide.provider('MathService', function() {
　　　　　　this.$get = function() {
　　　　　　　　　var factory = {};　　
　　　　　　　　　
　　　　　　　　　factory.multiply = function(a, b) {
　　　　　　　　　　　　return a　*　b;　
　　　　　　　　　}
　　　　　　　　　return factory;
　　　　　　});
　　　});
});

Constant - 常量

考虑到在配置阶段无法使用值的事实，常量用于在配置阶段传递值。

mainApp.constant("configParam", "constant value");

在线示例

以下示例显示了所有上述指令的使用-

testAngularJS.htm

示例

<html>
　　　<head>
　　　　　　<title>AngularJS Dependency Injection</title>/title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-依赖注入应用示例/h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="CalcController"
　　　　　　　　　<p>输入一个数字: <input type="number" ng-model="number"　/>/p>
　　　　　　　　　<button ng-click="square()">X<sup>2</sup>/button>
　　　　　　　　　<p>结果: {{result}}</p>/p>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.config(function($provide) {
　　　　　　　　　　　　$provide.provider('MathService', function() {
　　　　　　　　　　　　　　　this.$get = function() {
　　　　　　　　　　　　　　　　　　var factory = {};
　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　factory.multiply = function(a, b) {
　　　　　　　　　　　　　　　　　　　　　return a　*　b;
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　return factory;
　　　　　　　　　　　　　　　});
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　　　　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>

Prueba y mira‹/›

Resultados de salida

También puede abrirse en el navegador de InternettestAngularJS.htmy ver los resultados.

自定义指令 AngularJS 服务 Service AngularJS

Tutorial básico de AngularJS