zoukankan      html  css  js  c++  java
  • ANGULAR 2 BITS: UNIFIED DEPENDENCY INJECTION

    Angular 1.x has two APIs for injecting dependencies into a directive. These APIs are not interchangeable, so depending on what you are injecting, you need to use one or the other. Angular 2 unifies the two APIs, making the code easier to understand and test.

    ANGULAR 1.X

    Let’s start with a simple example: a directive autocompleting the user input.

        <input name="title" autocomplete="movie-title">
    

    The autocomplete directive takes the user input, and using the autocompleter service object, gets matching movie titles from the backend.

        module.directive('autocomplete', ["autocompleter", function(autocompleter) {
          return {
            restrict: 'A',
            link: function (scope, element, attrs) {
              //...
            }
          }
        }]);
    

    Note, we have to use two mechanisms to inject the autocompleter and the element.

    • The autocompleter service is injected into the directive factory function, and it is done by name.
    • The element and the attributes are injected into the link function. This is done by position, which forces us to pass in scope, even though we may not need it.

    ANGULAR 2

    Now, contrast it with the Angular 2 way of defining the same directive.

        @Decorator({selector: '[autocomplete]'})
        class Autocomplete {
            constructor(autocompleter:Autocompleter, el:NgElement, attrs:NgAttributes){
                //...
            }
        }
    

    Or if you prefer ES5

        function Autocomplete(autocompleter, el, attrs) {
            //...
        }
        Autocomplete.annotations = [new Decorator({selector: '[autocomplete]'})];
        Autocomplete.parameters = [[Autocompleter], [NgElement], [NgAttributes]];
    

    In Angular 2 the autocompleter, the element, and the attributes are injected into the constructor by name.

    HIERARCHICAL INJECTORS

    How is it possible? Should not every instance of the directive get its own element? It should. To enable that the framework builds a tree of injectors that matches the DOM.

        <div>
            <input name="title" autocomplete="movie-title">
            <input name="actor" autocomplete="actor-name">
        </div>
    

    The matching injector tree:

        Injector Matching Div
            |
            |__Injector Matching Movie Title
            |
            |__Injector Matching Actor Name
    

    Since there is an injector for every DOM element, the framework can provide element-specific information, such as an element, attributes, or a shadow root.

    SUMMARY

    In Angular 2 there is a single way to inject dependencies into a directive, regardless of what you inject: user-defined services, framework services, elements, attributes, or other directives.

      • Trying to find top amount structure publishing business on the net and your web site is extremely realistic if you ask me. I am just wishing this website supports every person a lot. being far more idea across the publishing companies...

      •  
      • Reply
      •  
         
      •  
         
        Avatar

        Looks like a typo: Aucotomplete

      •  
      • Reply
      •  
         
      •  
         
        Avatar

        Hi!
        You wrote: "To enable that the framework builds a tree of injectors that matches the DOM."
        Does it mean that every time we making changes in a DOM(for example, with ng-if, or dynamic ng-include), it will lead to creation of a new Injector tree or re-scan of injections?

      •  
      • Reply
      •  
         
        •  
           
          Avatar

          This is a good question.

          It works as follows:

          * In Angular2 the view is a chunk of DOM that can be added or removed.
          * The view has a tree of injectors associated with it.
          * We create prototypes for Views and Injectors. This happens during the compilation phase (once per component).
          * NgIf contains either a single View or nothing.
          * When NgIf evaluates to true, we use the prototypes to very efficiently create the required view and injectors.
          * In addition, we also have a view pool that allows us to reuse views and injectors. This is done to reduce GC pressure.

          The answer is:

          The mental model is that we do create the tree every time. But behind the scenes we use optimizations to make it cheap.

        •  
        • Reply
        •  
           
      •  
         
        Avatar

        Cool. Do you have a small app showing all this stuff? I'd like to play with it, but example in ng2 repo (todo app) shows not much.

      •  
      • Reply
      •  
         
  • 相关阅读:
    【iHMI43 液晶模块】【USB Mass storage 大容量存储设备 / 虚拟U盘代码包】
    [iBoard 电子学堂][第二卷 C程序设计语言 ]第二篇 数据类型与运算符
    【IAR EW STM8 1401】 破解方法
    [iBoard 电子学堂][第八卷 设计任意波发生器]第三篇 直接数字合成(DDS)原理
    发布《iCore》ARM + FPGA 双核心板
    [iBoard 电子学堂][第〇卷 电子基础 ]第三篇 单片微控制器、微处理器
    [iBoard 电子学堂][第二卷 C程序设计语言 ]第一篇 C语言简介
    【iCore双核心组合是开发板例程】【uCGUI 例程及代码包下载】
    发布《iBoard 电子学堂》基础例程之 8051 例程代码!
    【iBoard 电子学堂教程】【uCGUI 例程及代码包下载】
  • 原文地址:https://www.cnblogs.com/eebb/p/4402379.html
Copyright © 2011-2022 走看看