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

末蓝、 2022-06-10 21:17 192阅读 0赞

笔记：

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 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angularjs中service与controller注入

相关项目:[AngularJsPractice][] 对于angularjs的MVC结构主要依赖注入。下文已controller以及service注入为例说明。代码中的s

Dear 丶/ 2022年08月03日 13:55/ 0 赞/ 164 阅读

相关 AngularJs依赖注入

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

电玩女神/ 2022年07月12日 07:09/ 0 赞/ 192 阅读

相关【AngularJS】2.AngularJS依赖注入中代码压缩的问题

定义一个Controller，通常方法是如下代码，但是代码压缩的过程中function里面的参数有可能会变化，$scope有可能会变成$sc,或者是其他（这里的变化不可控制），

- 日理万妓/ 2022年06月18日 02:21/ 0 赞/ 216 阅读

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

笔记： 1.Provider模式是策略模式和工厂模式的综合体 2.核心目的是让接口和实现分离 3.在ng中，所有Provider都可以用来进行注入 provider

末蓝、/ 2022年06月10日 21:17/ 0 赞/ 193 阅读

相关 Angularjs 依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入： • value • factory • service • provider

电玩女神/ 2022年05月21日 05:10/ 0 赞/ 262 阅读

相关 AngularJs - 依赖注入

依赖注入，是一种软件设计模式，应DIP依赖倒置原则，描述组件之间高层组件不应该依赖于底层组件。依赖注入简化了Angular解析模块/组件之间依赖的过程。在AngularJS中，

深藏阁楼爱情的钟/ 2022年05月16日 04:47/ 0 赞/ 217 阅读

相关 [AngularJS]依赖注入

JS中的依赖注入，举个荔枝: <button id="btn">click me</button> <script> window.onload

本是古典何须时尚/ 2022年05月08日 03:26/ 0 赞/ 265 阅读

相关 AngularJS笔记（三）依赖注入与AngularJS实现单页应用

1、AngularJS的最大的不足/应用时需要特别关注的地方？原生ES/JS/DOM只有特定HTML元素的特定事件的监听机制，没有监听数据/对象/值改变的机制。每当数据

末蓝、/ 2022年04月03日 02:11/ 0 赞/ 251 阅读

相关跟我学AngularJs:Service、Factory、Provider依赖注入使用与区别

林炳文Evankaka原创作品。转载请注明出处[http://blog.csdn.net/evankaka][http_blog.csdn.net_evankaka]

r囧r小猫/ 2021年09月10日 22:58/ 0 赞/ 313 阅读

相关 AngularJS 4(六)【依赖注入】

依赖注入依赖注入是重要的程序设计模式。 Angular 有自己的依赖注入框架，离开了它，几乎没法构建 Angular 应用。它使用得非常广泛，以至于几乎每个人都会把它

约定不等于承诺〃/ 2021年06月26日 16:06/ 0 赞/ 435 阅读