angularjs依赖注入 angularjs依赖注入|AngularJS教程

本文概述

值
注入价值
Factory
将价值注入工厂
服务
提供者
常数

AngularJS带有内置的依赖注入机制。它有助于你将应用程序划分为多种不同类型的组件，这些组件可以作为依赖项相互注入。
依赖注入是一种软件设计模式，用于指定组件如何获取其依赖关系。在这种模式下，为组件提供了相关性，而不是在组件内对其进行编码。
模块化应用程序可以更轻松地重用，配置和测试应用程序中的组件。以下是对象和组件的核心类型：

值
Factory
服务
提供者
不变

这些对象和组件可以使用AngularJS Dependency Injection相互注入。
值在AngularJS中，值是一个简单的对象。它可以是数字，字符串或JavaScript对象。它用于在运行和配置阶段在工厂，服务或控制器中传递值。

//define a module var myModule = angular.module("myModule", []); //create a value object and pass it a data. myModule.value("numberValue", 100); myModule.value("stringValue", "abc"); myModule.value("objectValue", { val1 : 123, val2 : "abc"} );

在此，使用模块上的value（）函数定义值。第一个参数指定值的名称，第二个参数是值本身。工厂，服务和控制器现在可以通过名称来引用这些值。
注入价值要将值注入到AngularJS控制器函数中，请在定义值时添加具有相同参数的参数。

var myModule = angular.module("myModule", []); myModule.value("numberValue", 100); myModule.controller("MyController", function($scope, numberValue) { console.log(numberValue); });

FactoryFactory是用于返回值的函数。当服务或控制器需要从工厂注入值时，它将按需创建值。它通常使用工厂函数来计算并返回值。
让我们来看一个示例，该模块在模块上定义一个工厂，并使用一个控制器来注入工厂创建的值：

var myModule = angular.module("myModule", []); myModule.factory("myFactory", function() { return "a value"; }); myModule.controller("MyController", function($scope, myFactory) { console.log(myFactory); });

将价值注入工厂【angularjs依赖注入】要将值注入到AngularJS控制器函数中，请在定义值时添加具有相同参数的参数。

var myModule = angular.module("myModule", []); myModule.value("numberValue", 100); myModule.controller("MyController", function($scope, numberValue) { console.log(numberValue); });

注意：不是注入的工厂功能，而是工厂功能产生的值。服务在AngularJS中，服务是一个JavaScript对象，其中包含一组执行某些任务的函数。服务是通过在模块上使用service（）函数创建的，然后注入到控制器中。

//define a module var mainApp = angular.module("mainApp", []); ... //create a service which defines a method square to return square of a number. mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a, a); } }); //inject the service "CalcService" into the controller 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); } });

提供者在AngularJS中，provider在配置阶段（AngularJS自我引导的阶段）内部用于创建服务，工厂等。这是你可以创建的最灵活的工厂形式。 Provider是带有get（）函数的特殊工厂方法，用于返回值/服务/工厂。

//define a module var mainApp = angular.module("mainApp", []); ... //create a service using provider which defines a method square to return square of a number. mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); });

常数你不能将值注入module.config（）函数。相反，常量用于在配置阶段传递值。

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

让我们以一个示例来部署上述所有指令。

< !DOCTYPE html> < html> < head> < title>AngularJS Dependency Injection< /title> < /head> < body> < h2>AngularJS Sample Application< /h2>< div ng-app = "mainApp" ng-controller = "CalcController"> < p>Enter a number: < input type = "number" ng-model = "number" />< /p> < button ng-click = "square()">X< sup>2< /sup>< /button> < p>Result: {{result}}< /p> < /div>< script src = "http://ajax.googleapis.com/ajax/libs/angularjs/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", 10); 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>