您的位置:首页 > Web前端 > AngularJS

AngularJS 的Provider,Factory与Service实现依赖注入

2017-07-29 17:49 661 查看
 笔记:

1.Provider模式是策略模式和工厂模式的综合体

2.核心目的是让接口和实现分离

3.在ng中,所有Provider都可以用来进行注入

   provider/factory/service/constant/value等

4.以下类型的函数可以接受注入

   controller/directive/filter/service/factory等

5.ng中的"依赖注入"是通过provider和injector这两个机制联合实现的

第一种:Provider

<html ng-app="MyModule">
<head>
<meta charset="utf-8"/>
<script src="../Script/angular.min.js" type="text/javascript"></script>
<script src="provider.js"></script>
<link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div>
<div ng-controller="MyCtrl">
<span style="font-size: 20px;">{{gameName}}</span>
</div>
</div>
</body>
</html>

var myModule = angular.module("MyModule", []);
myModule.provider("HelloAngular", function() {
return {
$get: function() {
var name = "夏天到了!";
function getName() {
return name;
}
return {
getName: getName       //返回一个对象,调用方法
}
}
}
});
myModule.controller('MyCtrl', ['$scope', 'HelloAngular',        //依赖$scope,并注入HelloAngular这个provider
function($scope, helloAngular) {
$scope.gameName = helloAngular.getName(); //拿到HelloAngular后,就可以调用它的方法,并复制给$scope.gameName
}
])


第二种:Factory

var myModule = angular.module("MyModule", []);
myModule.factory("HelloAngular", function() {
var name = "夏天到了!";
function getName(){
return name;
}
return {
getName:getName
};
});

myModule.controller('MyCtrl', ['$scope', 'HelloAngular',
function($scope, helloAngular) {
$scope.gameName = helloAngular.getName();
}
]);

第三种:Service

var myModule = angular.module("MyModule", []);
myModule.service("HelloAngular", function() {
this.name = "夏天到了!";
this.getName=function(){
return this.name;     //返回一个构造函数
}
});

myModule.controller('MyCtrl', ['$scope', 'HelloAngular',
function($scope, helloAngular) {
$scope.gameName = helloAngular.getName();
}
]);

总结:

        Provider/Factory/Service/Constant/Value

&Provider是基础,其他都是调用Provider函数实现的,只是参数不同

&从左向右,灵活性越来越差
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: