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
第二种:Factory
第三种:Service
总结:
Provider/Factory/Service/Constant/Value
&Provider是基础,其他都是调用Provider函数实现的,只是参数不同
&从左向右,灵活性越来越差
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函数实现的,只是参数不同
&从左向右,灵活性越来越差
相关文章推荐
- [置顶] 跟我学AngularJs:Service、Factory、Provider依赖注入使用与区别
- 跟我学AngularJs:Service、Factory、Provider依赖注入使用与差别
- AngularJs:Service、Factory、Provider依赖注入使用与区别
- AngularJs:Service、Factory、Provider依赖注入使用与区别
- AngularJs:Service、Factory、Provider依赖注入使用与区别
- ASP.NET Core中的依赖注入(5): ServiceProvider实现揭秘 【总体设计 】
- ASP.NET Core中的依赖注入(5): ServiceProvider实现揭秘 【解读ServiceCallSite 】
- AngularJS中service,factory,provider的区别
- AngularJS学习笔记--服务的创建方法factory() service() provider()等
- AngularJS: Factory vs Service vs Provider
- angularjs中provider、factory和service三者的写法与区别
- AngularJS之Factory vs Service vs Provider
- 自学实现angularjs依赖注入
- angularjs factory,service,provider 自定义服务的不同
- Angularjs中provider,factory和service的不同
- AngularJS之依赖注入模拟实现
- AngularJS之自定义服务详解(factory、service、provider)
- angularjs factory,service,provider 自定义服务的不同
- AngularJS的自定义服务,factory、provider、service、constant、value等方法的区别
- angularJS中service、factory、provider使用和区别