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.

    • paper writing service • 5 months ago

      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...

    • 1
    • Reply
    • Share ›
    •  
       
    •  
       
      Robert Penner • a month ago

      Looks like a typo: Aucotomplete

    • Reply
    • Share ›
    •  
       
    •  
       
      Serg de Adelantado • 2 months ago

      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
    • Share ›
    •  
       
      •  
         
        Victor Savkin Mod Serg de Adelantado • 2 months ago

        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
      • Share ›
      •  
         
    •  
       
      Sekib Omazic • 5 months ago

      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
    • Share ›
    •  
       

ANGULAR 2 BITS: UNIFIED DEPENDENCY INJECTION的更多相关文章

  1. [Angular] Communicate Between Components Using Angular Dependency Injection

    Allow more than one child component of the same type. Allow child components to be placed within the ...

  2. [Angular] Component's dependency injection

    An Angular service registered on the NgModule is globally visible on the entire application. Moreove ...

  3. 依赖注入 | Dependency Injection

    原文链接: Angular Dependency Injection翻译人员: 铁锚翻译时间: 2014年02月10日说明: 译者认为,本文中所有名词性的"依赖" 都可以理解为 & ...

  4. AngularJs学习笔记--Dependency Injection(DI,依赖注入)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...

  5. 清晰架构(Clean Architecture)的Go微服务: 依赖注入(Dependency Injection)

    在清晰架构(Clean Architecture)中,应用程序的每一层(用例,数据服务和域模型)仅依赖于其他层的接口而不是具体类型. 在运行时,程序容器¹负责创建具体类型并将它们注入到每个函数中,它使 ...

  6. .NET编程5月小结 - Blazor, Unity, Dependency Injection

    本文是我在5月份看到的一些有趣的内容的集合.在这里你可以找到许多有关Blazor.ASPNET Core的学习资源和示例项目,有关在Unity中使用Zenject进行单元测试的博客,有关Unity项目 ...

  7. Ninject学习(一) - Dependency Injection By Hand

    大体上是把官网上的翻译下而已. http://www.ninject.90iogjkdcrorg/wiki.html Dependency Injection By Hand So what's Ni ...

  8. MVC Controller Dependency Injection for Beginners【翻译】

    在codeproject看到一篇文章,群里的一个朋友要帮忙我翻译一下顺便贴出来,这篇文章适合新手,也算是对MEF的一个简单用法的介绍. Introduction In a simple stateme ...

  9. 控制反转Inversion of Control (IoC) 与 依赖注入Dependency Injection (DI)

    控制反转和依赖注入 控制反转和依赖注入是两个密不可分的方法用来分离你应用程序中的依赖性.控制反转Inversion of Control (IoC) 意味着一个对象不会新创建一个对象并依赖着它来完成工 ...

随机推荐

  1. Struts2中StrutsRequestWrapper类

    该类可获取一些请求地址,在自定义struts2标签时用到 //获取值栈 Map cont= this.getStack().getContext(); StrutsRequestWrapper req ...

  2. 基于http协议的加密传输方案

    最近公司需要通过公网与其它平台完成接口对接,但是基于开发时间和其它因素的考虑,本次对接无法采用https协议实现.既然不能用https协议,那就退而求其次采用http协议吧! 那么问题来了!在对接的过 ...

  3. SonarQube使用教程

    SonarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误,本文将会介绍一下这个工具的安装.配置以及使用. 一.SonarQube的安装使用: 下载地址:http://ww ...

  4. Hive之 hive架构

    Hive架构图 主要分为以下几个部分: 用户接口,包括 命令行CLI,Client,Web界面WUI,JDBC/ODBC接口等 中间件:包括thrift接口和JDBC/ODBC的服务端,用于整合Hiv ...

  5. windows7安装django并创建第一个应用

    1.安装django 1.1.下载Django包 https://www.djangoproject.com/download/https://www.djangoproject.com/m/rele ...

  6. CentOS 6.5 下搭建FastDFS服务

    参考网站: http://www.open-open.com/lib/view/open1435468300700.html http://blog.csdn.net/lynnlovemin/arti ...

  7. 【python】FTP客户端

    Python中默认安装的ftplib模块定义了FTP类,其中函数有限,可用来实现简单的ftp客户端,用于上传或下载文件,函数列举如下 ftp登陆连接 from ftplib import FTP #加 ...

  8. JS代码压缩格式化在线地址

    JS在线格式化: http://tool.oschina.net/codeformat/js JS在线压缩: http://dean.edwards.name/packer/

  9. win10 svn commit无响应

    只是发现其中的一个原因,发现.cs代码文件图标变红了,默认是用Code Writer打开,和SVN可能是冲突了,解决方式是用Code Writer打开一下.cs文件就可以了,原因可能是不打开一次Cod ...

  10. Entity Framework的优势和缺点

    优点:简单说就是Entity Framework省事,做业务系统,管理系统会减少很多代码,程序员可以更关注业务实现本身. 缺点:当处理大数据量和高并发时,由于Entity Framework是自动化程 ...