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.
- 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...
- 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?- 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.
- 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.
- Victor Savkin Mod Sekib Omazic • 5 months ago
Currently no, but we are working hard on it. I'll write a blog post when it is ready.
ANGULAR 2 BITS: UNIFIED DEPENDENCY INJECTION的更多相关文章
- [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 ...
- [Angular] Component's dependency injection
An Angular service registered on the NgModule is globally visible on the entire application. Moreove ...
- 依赖注入 | Dependency Injection
原文链接: Angular Dependency Injection翻译人员: 铁锚翻译时间: 2014年02月10日说明: 译者认为,本文中所有名词性的"依赖" 都可以理解为 & ...
- AngularJs学习笔记--Dependency Injection(DI,依赖注入)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...
- 清晰架构(Clean Architecture)的Go微服务: 依赖注入(Dependency Injection)
在清晰架构(Clean Architecture)中,应用程序的每一层(用例,数据服务和域模型)仅依赖于其他层的接口而不是具体类型. 在运行时,程序容器¹负责创建具体类型并将它们注入到每个函数中,它使 ...
- .NET编程5月小结 - Blazor, Unity, Dependency Injection
本文是我在5月份看到的一些有趣的内容的集合.在这里你可以找到许多有关Blazor.ASPNET Core的学习资源和示例项目,有关在Unity中使用Zenject进行单元测试的博客,有关Unity项目 ...
- Ninject学习(一) - Dependency Injection By Hand
大体上是把官网上的翻译下而已. http://www.ninject.90iogjkdcrorg/wiki.html Dependency Injection By Hand So what's Ni ...
- MVC Controller Dependency Injection for Beginners【翻译】
在codeproject看到一篇文章,群里的一个朋友要帮忙我翻译一下顺便贴出来,这篇文章适合新手,也算是对MEF的一个简单用法的介绍. Introduction In a simple stateme ...
- 控制反转Inversion of Control (IoC) 与 依赖注入Dependency Injection (DI)
控制反转和依赖注入 控制反转和依赖注入是两个密不可分的方法用来分离你应用程序中的依赖性.控制反转Inversion of Control (IoC) 意味着一个对象不会新创建一个对象并依赖着它来完成工 ...
随机推荐
- [BZOJ3470]Freda’s Walk
bzoj description 雨后的Poetic Island空气格外清新,于是Freda和Rainbow出来散步. Poetic Island的交通可以看作一张\(n\)个点.\(m\)边的有向 ...
- postgres 使用存储过程批量插入数据
參考资料(pl/pgsql 官方文档): http://www.postgresql.org/docs/9.3/static/plpgsql.html create or replace functi ...
- lvds cable信号
http://forums.bit-tech.net/showthread.php?t=208616
- 设置JAVA HOME环境变量的秕处理
echo "放在JDK目录下,win xp需要下载SETX.EXE" setx /m Java_Home "%cd%" setx /m ClassPath &q ...
- codis须知
codis是豌豆荚team出的一个redis集群,和官方的集群区别的地方在于 基于proxy,官方是基于gossip codis所有的读写都通过proxy,对于前端业务是透明的 官方的是读写发现在某个 ...
- memcache 命令行操作
今天找了很久,如何在服务器直接查看memcache 的值, 来确定php中memcache是否已经写进去了 https://www.ttlsa.com/memcache/memcache-list-a ...
- 常用数据结构的功能及复杂度总结(OI)
不定长数组 维护一个序列 在末尾插入/删除均摊O(1) 任意位置插入O(n) 指定位置查询/修改O(1) 空间O(n) 链表 维护一个序列 定位到第i个位置O(n) 在任意位置(已定位到该位置)插入/ ...
- 读取配置文件工具demo
//读取配置文件public class ResourcesUtils { /* * @description:根据属性获取文件名 * * @param:propertyName文件的属性名 * * ...
- selenium+python自动化83-pip安装selenium报Read time out HTTPSConnectionPool(host='pypi.python.org' port443)
遇到问题 1.有些小伙伴在用pip安装selenium时候报 Read time out HTTPSConnectionPool(host='pypi.python.org' port443) 2.估 ...
- WMI获取计算机信息
On Error Resume NextstrComputer = "."strInfo = ""Set objWMIService = GetObject(& ...