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

发布时间：2020-12-17 09:02:40 所属栏目：安全来源：网络整理

导读：笔记： 1.Provider模式是策略模式和工厂模式的综合体 2.核心目的是让接口和实现分离 3.在ng中，所有Provider都可以用来进行注入 provider/factory/service/constant/value等 4.以下类型的函数可以接受注入 controller/directive/filter/service/factory等 5.

笔记：

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',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',helloAngular) {
        $scope.gameName = helloAngular.getName();
    }
]);

总结：

Provider/Factory/Service/Constant/Value

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

&从左向右，灵活性越来越差

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!