美文网首页
angularJS中的依赖注入

angularJS中的依赖注入

作者: inh_ | 来源:发表于2017-10-20 09:29 被阅读0次

    大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。

    今天给大家带来的是:angularJS中的依赖注入

    目录

    1.背景介绍

    2.知识剖析

    3.常见问题

    4.解决方案

    5.编码实战

    6.扩展思考

    7.参考文献

    8.更多讨论

    1.背景介绍

    以前原始社会,我们需要斧子,然后由于还没有社会分工,只能自己打磨一把来使用,对应在程序上是我们需要一个功能的时候只能自己创建,然后使用new等关键字来调用方法。 然后工业社会阶段,我们需要使用斧子的时候,只需要找到工厂,购买斧子就可以使用,共产主义社会,需要斧子的时候甚至不需要购买,直接坐等社会提供。 依赖注入的意思就是我们需要的东西不是我们自己创建的,而是第三方提供的,我们只需要引用就可以使用了。 不需要的时候就不引用它。

    依赖注入产生的背景:

    传统应用程序通常是在类内部执行代码中主动创建这个类所依赖的其它对象, 从而导致类与类之间发生紧密耦合,使得类难于测试和隔离,最终导致系统的扩展和维护异常困难。

    解决方案:

    依赖注入用来解决组件之间依赖关系、配置及生命周期管理, 通过转移对象控制权,可以解决类之间的耦合问题, 对象与对象之间是松散耦合关系,更重要的是使得应用程序体系结构变得非常灵活, 很好的体现了面向对象的设计法则之一---依赖设计原则

    了解了什么是依赖注入,就是说高层类(5岁小孩)应该依赖底层基础设施(家长)来提供必要的服务。 依赖注入不是目的,它是一系列工具和手段,最终的目的是帮助我们开发出松散耦合(loose coupled)、 可维护、可测试的代码和程序

    2.知识剖析

    依赖注入的原理:

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

    依赖注入有什么用

    作用一:可以使我们能够轻松对组件进行测试

    作用二:降低代码的逻辑复杂度

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

    值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器。

    mainApp.value("defaultInput", 5);

    mainApp.controller('CalcController', function( defaultInput) {

    });

    工厂是用于返回函数的值。它根据需求创造值,每当一个服务或控制器需要。它通常使用一个工厂函数来计算并返回对应值

    .factory('HelloAngular',function () {//factory方法要简单一点

    var name = '锤子';

    function getName() {//函数

    return name;

    }

    return{

    getName:getName

    }

    }

    提供者所使用的AngularJS内部创建过程中配置阶段的服务,工厂等(相AngularJS引导自身期间 )。下面提到的脚本,可以用来创建,我们已经在前面创建MathService。提供者是一个特殊的工厂方法以及 get()方法,用来返回值/服务/工厂。

    $provide.provider('MathService', function() {

    this.$get = function() {

    var factory = {};

    factory.multiply = function(a, b) {

    return a * b;

    }

    return factory;

    };

    });

    服务是一个单一的JavaScript包含了一组函数对象来执行某些任务。服务使用service()函数,然后注入到控制器的定义。

    //服务

    .service('service',function () {

    return [1,2,3,4]  //只能定义对象,不能定义基本的如数字,字符串

    // 1111

    })

    3.常见问题

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

    4.解决方案

    1.推断式注入声明 如果没有明确的声明, AngularJS会假定参数名称就是依赖的名称。 请注意,这个过程只适用于未经过压缩和混淆的代码,因为AngularJS需要原始未经压缩的参数列表来进行解析 当AngularJS实例化这个模块时,会查找greeter并自然而然地把对它的引用传递进去 这里我们先看一个简单的依赖注入的例子。

    2、显式注入声明 AngularJS提供了显式的方法来明确定义一个函数在被调用时需要用到的依赖关系。 通过这种方法声明依赖,即使在源代码被压缩、参数名称发生改变的情况下依然能够正常工作。

    3 行内注入声明 AngularJS提供的注入声明的最后一种方式,是可以随时使用的行内注入声明。 允许我们在函数定义时从行内将参数传入。此外,它可以避免在定义过程中使用临时变量。 这种方式其实是一个语法糖,它同前面提到的通过$inject属性进行注入声明的原理是完全一样的

    5.编码实战

    通过工厂可以让两个不同的controller里面的值双向绑定

    angular.module('App',[])

    //服务

    .service('service',function () {

    return [1,2,3,4]  //只能定义对象,不能定义基本的如数字,字符串

    // 1111

    })

    //工厂 都可以定义

    .factory('factory',function () {

    return'李四'

    })

    //通过工厂使他们共享

    .factory('Data',function () {

    return{

    ssss:'共享'

    }

    })

    .controller('firstcontroller',['$scope','factory','service','Data',function ($scope,factory,service,Data) {

    console.log(service)

    console.log(factory)

    $scope.name='张三'

    $scope.Data= Data

    }])

    .controller('datacontroller',['$scope','Data',function ($scope,Data) {

    $scope.Data= Data

    }])

    6.扩展思考

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

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

    7.参考文献

    参考:深究依赖注入

    8.更多讨论

    AngularJS中的依赖注入组件的应用场景?

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


    undefined_腾讯视频

    相关文章

      网友评论

          本文标题:angularJS中的依赖注入

          本文链接:https://www.haomeiwen.com/subject/uaieuxtx.html