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 agoHi!
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 agoThis 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 agoCool. 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.
最新文章
- Code First数据库迁移
- jq插件制作(力推)
- 两种让tableview返回顶部的方法
- git初体验（五）SSH的理解
- Android Manifest 权限描述大全
- cocos2d-x 3.0rc2中读取sqlite文件
- java 21-13 合并
- 蓝灯官网下载，蓝灯最新版下载，Lantern（蓝灯）
- 【jQuery】使用JQ来编写面板的淡入淡出效果
- npoi导入--从varchar数据类型到datetime数据类型转换产生一个超出范围的值问题
- Visual Studio 20周年，我和VS不得不说的故事（内含福利）
- django报错Manager isn't accessible via UserInfo instances
- delphi 中实现当期日期 减去 若干小时的方法
- 数据库between and
- Centos 6\7下yum安装rstudio-server\shiny-server
- phpstorm 不能自动打开上次的历史文件
- 分布式缓存技术redis系列（四）——redis高级应用（集群搭建、集群分区原理、集群操作）
- Ubuntu16.04下安装QQ的完整操作记录（经验证可用）
- logstash快速入门
- WPF 简易进度条效果