AnglarJs 依赖注入
来源:互联网 发布:js实现购买功能 编辑:程序博客网 时间:2024/05/30 04:42
一、概念
1.1 概念
一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。
// 个人理解:类似Android中的导包
1.2 优点
该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则。
与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统 找到依赖
二、组件
2.0 AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入:
- value
- factory
- service
- provider
- constant
2.1 value
Value 是一个简单的 javascript 对象,用于向控制器传递值(配置阶段):
2.1.1 创建value
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
2.1.2 注入value
// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
});
2.2 factory
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
2.2.1 创建factory
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
2.2.2 注入factory
// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
2.3 provider
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get(),它用于返回 value/service/factory。
2.3.1 创建provider
// 定义一个模块
var mainApp = angular.module("mainApp", []);
...
2.3.2 provider的依赖注入
// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
2.4 constant
constant(常量)用来在配置阶段传递数值,注意这个常量在配置阶段是不可用的。
mainApp.constant("configParam", "constant value");
三、实例
以下实例提供了以上几个依赖注入机制的演示。
<html> <head> <meta charset="utf-8"> <title>AngularJS 依赖注入</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> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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>
1
四、依赖注入的三种方式
4.1 推断式注入
4.2 显示注入
4.2.1 定义
AngularJs提供了显式的方法来明确定义一个函数在被调用时需要用到的依赖关系。
通过这种方法声明依赖,即使在源代码被压缩,参数名称发生改变的情况下依然能够正常工作。
4.2.2 使用方法
var aControllerFactory =
function aController($scope,greeter){
// ...控制器逻辑
}
aControllerFactory.$inject = ['$scope','greeter'];
- //Greeter 服务
- var greeterService = function(){
- console.log("greeter service");
- }
- //我们应用的控制器
- angular.module('myApp',[])
- .controller('MyController',aControllerFactory)
- .factory('greeter',greeterService);
- //获取注入器并创建一个新的作用域
- var injector = angular.injector(['ng','myApp']),
- controller = injector.get('$controller'),
- rootScope = injector.get('$rootScope'),
- newScope = rootScope.$new();
- //调用控制器
- controller('MyController',{$scope:newScope});
4.3 行内注入
4.3.1 定义
行内注入声明 和$inject属性进行注入声明的原理是完全一样的。但允许我们在函数定义时从行内将参数传入。
此外,它可以避免在定义过程中使用临时变量。
4.3.2 使用方法
在定义一个AngularJS的对象时,行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
数组的元素是字符串,它们代表的是可以被注入到对象中的依赖的名字。最后一个参数就是依赖注入的目标函数对象本身。
angular.module('myApp')
.controller('MyController',['$scope','greeter',function($scope,greeter){
}]);
0 0
- AnglarJs 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 依赖注入
- 查询被锁的包
- 网络爬虫在Python 3.5下出现“ cannot import name 'HTMLParseError'”错误解决办法
- java空指针处理
- php-fpm的reload过程
- php基本语法1
- AnglarJs 依赖注入
- 如何加快Android Studio 编译app 的速度
- Nginx介绍及原理简单分析
- DOM包裹wrap()方法
- ajax超时重连。完整版本。
- 如何快速成为一名Linux运维工程师
- Android LayoutInflater.inflate的使用及源码分析
- pwnable.kr [Toddler's Bottle]
- 小寂寞之 ----- C #多线程