发表于: 2017-06-05 22:31:20

1 1087


今天完成的事情:

    任务9图片上传

    小课堂PPT

  

明天计划的事情

    准备把任务9和任务10一起做,formdata提交

    

    

遇到的问题:

    1.下图这个上传功能是直接将图片传给接口?还是通过下面的“立即上线”传给接口?

        这里需求没看懂,我理解是在点击立即上线的时候,将信息全部汇总传给接口,但是这样的话,这个上传按钮就只是一个摆设,没什么实际作用了

     

   

收获: 了解angular依赖注入。




angularJS中的依赖注入

小课堂【成都第131期】

分享人:王帅

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

在软件工程中,依赖注入是一种软件设计模式,一个依赖是一个被其他对象(client)调用的对象(服务),注入则是将被依赖的对象(service)实例传递给依赖对象(client)的行为。将被依赖的对象传给依赖者,而不需要依赖者自己去创建或查找所需对象是DI的基本原则。 依赖注入允许程序设计遵从依赖倒置原则(简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合) 调用者(client)只需知道服务的接口,具体服务的查找和创建由注入者(injector)负责处理并提供给调用者,这样就分离了服务和调用者的依赖,符合低耦合的程序设计原则。

依赖注入的三个角色:
调用者(client)
服务(service)
注入者 (injector)

2.知识剖析

依赖注入的原理:
程序运行过程中,如需另一个对象协作(调用它的方法、访问他的属性)时,无须在代码中创建被调用者,而是依赖于外部容器的注入, 调用者仅通过声明某个组件就可以获得组件的控制权,而对该组件的依赖关系管理、查找、加载由外部完成。

angular提供了几种很好的依赖注入机制,以下5个核心组件用来作为依赖注入 value、factory、service、provider、constant、 值 工厂 服务 提供者 常值

value:值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器
factory:工厂是用于返回函数的值。它根据需求创造值,每当一个服务或控制器需要。它通常使用一个工厂函数来计算并返回对应值
provider:提供者所使用的AngularJS内部创建过程中配置阶段的服务,工厂等(相AngularJS引导自身期间)。下面提到的脚本,可以用来创建,我们已经在前面创建MathService。提供者是一个特殊的工厂方法以及get()方法,用来返回值/服务/工厂
service:服务是一个单一的JavaScript包含了一组函数对象来执行某些任务。服务使用service()函数,然后注入到控制器的定义
constant: 常量用于通过配置相位值考虑事实,值不能使用期间的配置阶段被传递

3.常见问题

依赖注入的几种方法如何使用

4.解决方案

1.推断式注入声明 如果没有明确的声明, AngularJS会假定参数名称就是依赖的名称。 请注意,这个过程只适用于未经过压缩和混淆的代码,因为AngularJS需要原始未经压缩的参数列表来进行解析 当AngularJS实例化这个模块时,会查找greeter并自然而然地把对它的引用传递进去
2、显式注入声明 AngularJS提供了显式的方法来明确定义一个函数在被调用时需要用到的依赖关系。 通过这种方法声明依赖,即使在源代码被压缩、参数名称发生改变的情况下依然能够正常工作。
3 行内注入声明 AngularJS提供的注入声明的最后一种方式,是可以随时使用的行内注入声明。 允许我们在函数定义时从行内将参数传入。此外,它可以避免在定义过程中使用临时变量。 这种方式其实是一个语法糖,它同前面提到的通过$inject属性进行注入声明的原理是完全一样的

5.编码实战

计算两个数乘积的小例子
//创建模块
var mainApp = angular.module("mainApp", []);

//创建一个value
mainApp.value("defaultInput", 5);
//创建一个服务者
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
       this.$get = function() {
           var factory = {};
           factory.multiply = function(a, b) {
               return a * b;
           };
           return factory;
       };
   });
});

//创建一个工厂函数
mainApp.factory('MathService', function() {
   var factory = {};
   factory.multiply = function(a, b) {
       return a * b;
   };
   return factory;
});
//创建一个服务
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
       return MathService.multiply(a,a);
   }
});
//创建控制
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
       $scope.result = CalcService.square($scope.number);
   }
});

6.扩展思考

这些依赖组件的本质是啥?

factory,service以及value全部都是用来定义一个provider的简写, 它们提供了一种方式来定义一个provider而无需输入所有的复杂的代码。

7.参考文献

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

参考:理解依赖注入

参考:深究依赖注入

参考:深究依赖注入

8.更多讨论

AngularJS中的依赖注入与不用依赖注入的其他框架相比,有何优点?

个人理解,依赖注入降低了依赖和被依赖类型间的耦合,低耦合有利于代码的维护和更改以及复用

鸣谢

感谢大家观看

BY : 王帅



返回列表 返回列表
评论

    分享到