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.javascript
ANGULAR 1.X
Let’s start with a simple example: a directive autocompleting the user input.java
<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.nginx
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.web
- 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.typescript
@Decorator({selector: '[autocomplete]'}) class Autocomplete { constructor(autocompleter:Autocompleter, el:NgElement, attrs:NgAttributes){ //... } }
Or if you prefer ES5app
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.less
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.ide
<div> <input name="title" autocomplete="movie-title"> <input name="actor" autocomplete="actor-name"> </div>
The matching injector tree:post
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.ui
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.
相關文章
- 1. Dependency Injection using RequireJS & AngularJS
- 2. AngularJS之Dependency Injection（五）
- 3. Dependency Injection 依賴注入
- 4. AngularJS - 依賴注入(Dependency Injection)
- 5. Spring的DI（Dependency Injection)
- 6. 【譯】Dependency Injection with Autofac
- 7. Dependency Injection學習筆記
- 8. 6.依賴注入（Dependency Injection）
- 9. ASPNET5 依賴注入（Dependency Injection）
- 10. DevExpress-WPF Dependency Injection System.IO.FileNotFOundException after deployment
- 更多相關文章...
- • Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
- • QBC的2種檢索方式 - Hibernate教程
- • Composer 安裝與使用
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Dependency Injection using RequireJS & AngularJS
- 2. AngularJS之Dependency Injection（五）
- 3. Dependency Injection 依賴注入
- 4. AngularJS - 依賴注入(Dependency Injection)
- 5. Spring的DI（Dependency Injection)
- 6. 【譯】Dependency Injection with Autofac
- 7. Dependency Injection學習筆記
- 8. 6.依賴注入（Dependency Injection）
- 9. ASPNET5 依賴注入（Dependency Injection）
- 10. DevExpress-WPF Dependency Injection System.IO.FileNotFOundException after deployment