zoukankan      html  css  js  c++  java
  • 再谈angularjs DI(Dependency Injection)

         在前面已经介绍了关于angularjs,以及扩展了一些jQuery ui的一些组件为angularjs的directive。在这里应进口007 上篇留言我们来看看在angularjs中的DI特性。

        DI:依赖注入,是一种软件设计模式,应DIP依赖倒置原则,描述组件之间高层组件不应该依赖于底层组件。依赖倒置是指实现和接口倒置,采用自顶向下的方式关注所需的底层组件接口,而不是其实现。其应用框架则为IOC,在.net中有很多我们熟悉的IOC框架,如Unity,Castle windsor,Ninject,Autofact等等,其常常分为构造注入,函数注入,属性注。同时在IOC和Service Locator(服务查找),如果你想更多的了解IOC和DI请参见martin fowler的Inversion of Control Containers and the Dependency Injection pattern

         回到angularjs:在框架中为我们提供了angular.injector(modules)DI注入注射器。但是在我们使用注入的时候常常是不需要关心具体的如何注入。我们只需要按照其规则书写我们的angularjs代码就会很容易的得到angularjs的DI特性,DI方式有三种:

    1:推断式注入:在angularjs中我们可以在我们需要注入的地方按照名称注入,这里要求参数名称必须和注入服务实例名称相同,一种名称约定。angularjs会提取参数名称查找相应DI实例注入。

    例如:

     1 var myModule = angular.module('myModule', []);
     2 
     3 myModule.factory('$alert', function($window) {
     4 
     5     return {
     6         alert: function(text) {
     7             $window.alert(text);
     8         }
     9     };
    10 });
    11 
    12 var myController = function($scope, $alert) {
    13     $scope.message = function(msg) {
    14         console.log(msg);
    15         $alert.alert(msg);
    16     };
    17 };
    18 myModule.controller("myController", myController);​

    在上面实例我利用已知的window服务新建了一个alert的服务.并利用注入到我们的controller使用.这里采用的都是约定注入(根据参数名称注入).

    jsfiddle在线演示http://jsfiddle.net/whitewolf/zyA5B/7/

    2:标记注入:在angularjs中我们可以利用$inject标注DI注入,这里需要注入服务名称的顺序和构造参数名对应.这里可以解决以上约定的死板性.

    将上例代码改变为如下:

    代码如下:

     1 var myModule = angular.module('myModule', []);
     2 
     3 myModule.factory('$alert', ['$window', function($window) {
     4 
     5     return {
     6         alert: function(text) {
     7             $window.alert(text);
     8         }
     9     };}]);
    10 
    11 var myController = function($scope, $alert) {
    12     $scope.message = function(msg) {
    13         console.log(msg);
    14         $alert.alert(msg);
    15     };
    16 };
    17 myController.$inject = ['$scope', '$alert'];
    18 myModule.controller("myController", myController);​

    jsfiddle在线演示http://jsfiddle.net/whitewolf/zyA5B/8/

    3:内联注入:对于directives,factory,filter等特殊指令使用$inject标注注入使用不是那么友好,angularjs特别增加了内联注入。如上面的$alert服务     

    1 myModule.factory('$alert', ['$window', function($window) { 
    2 
    3    return { 
    4        alert: function(text) { 
    5        $window.alert(text); 
    6     } 
    7 };}]);

     

       在angularjs中我们可以在controller中实用DI特性,同时一些列的工厂方法如directives, services, filters同样可以实用内联注入得到DI特性。

    1:在controller中形如:

     1 var MyController = function(dep1, dep2) {
     2 
     3 ...
     4 
     5 }
     6 
     7 MyController.$inject = ['dep1', 'dep2'];
     8 
     9  
    10 
    11 MyController.prototype.aMethod = function() {
    12 
    13 ...
    14 
    15 }

       

    2:工厂方法注入形如:

     1 angualar.module('myModule', []).
     2 
     3 config(['depProvider', function(depProvider){
     4 
     5 ...
     6 
     7 }]).
     8 
     9 factory('serviceId', ['depService', function(depService) {
    10 
    11 ...
    12 
    13 }]).
    14 
    15 directive('directiveName', ['depService', function(depService) {
    16 
    17 ...
    18 
    19 }]).
    20 
    21 filter('filterName', ['depService', function(depService) {
    22 
    23 ...
    24 
    25 }]).
    26 
    27 run(['depService', function(depService) {
    28 
    29 ...
    30 
    31 }]);
  • 相关阅读:
    How to install VXDIAG Honda, Toyota and JLR SDD software
    16% off MPPS V16 ECU tuning tool for EDC15 EDC16 EDC17
    Cummins INSITE locked and ask for verification code
    How to use BMW Multi Tool 7.3 to replace lost key for BMW X1
    Bleed Brake Master Cylinder with Intelligent Tester IT2
    Porsche Piwis Tester II “No VCI has been detected”,how to do?
    Creader VIII VS. Creader VII+
    How to solve GM MDI cannot complete the installation
    汽车OBD2诊断程序开发 (原文转载,思路很清晰!)
    汽车节温器单片机开发思路
  • 原文地址:https://www.cnblogs.com/whitewolf/p/2680659.html
Copyright © 2011-2022 走看看