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

来源：互联网发布：网络门禁模块编辑：程序博客网时间：2024/05/16 07:40

笔记：

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函数实现的，只是参数不同

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

阅读全文

0 0