Difference between component and directive in Angular 2
来源:互联网 发布:海外网络推广 编辑:程序博客网 时间:2024/05/23 14:28
原文链接: http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html
Difference between component and directive in Angular 2 ?
OnFriday, January 08, 2016AngularAngular 2AngularJs 2Difference between component and directive in Angular 2
Component and Directive is very important in Angular 2. Today we sharing difference between component and directive in Angular 2.
Components
Directive
For register component we use @Component meta-data annotation.
For register directives we use @Directive meta-data annotation.
Component is a directive which use shadow DOM to create encapsulate visual behavior called components. Components are typically used to create UI widgets.
Directives is used to add behavior to an existing DOM element.
Component is used to break up the application into smaller components.
Directive is use to design re-usable components.
Only one component can be present per DOM element.
Many directive can be used in a per DOM element.
@View decorator or templateurl template are mandatory in the component.
Directive don’t have View.
Component is used to define pipes.
You can’t define Pipes in directive.
viewEncapsulation can be define in components because they have views.
Directive don’t have views. So you can’t use viewEncapsulation in directive.
Example –
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'message'
})
@View({
template: `
<h1>Hello Angular {{version}}</h1>
`
})
class Message {
constructor(public version: string) {}
}
<message></message>
Example –
import {Directive} from 'angular2/angular2';
@Directive({
selector: "[myDirective]",
hostListeners: {
'click': 'showMessage()'
}
})
class Message {
constructor() {}
showMessage() { console.log('Hello Directive'); }
}
<button myDirective>Click here</button>
Keywords - component vs directive , Difference between component and directive in Angular 2
0 0
- Difference between component and directive in Angular 2
- What's the difference between annotations and decorators in Angular 2?
- Difference between JSP include directive and JSP include action
- Difference between STA and MTA in thread
- Difference between Externalizable and Serializable in Java
- Difference between Vector and ArrayList in java?
- Difference between Comparator and Comparable in Java
- Difference between TreeMap and TreeSet in Java
- Difference between RegularEnumSet and JumboEnumSet in Java
- Difference between __str__ and __repr__ in Python
- Difference Between Thread and AsyncTask in Android
- Difference between Comparator and Comparable in java
- Difference between Stack and Heap in Java
- Difference between dialog and session in SIP?
- Difference between ArrayList and Vector In java
- Difference between Controller and Model in MVC
- Difference between datacontract and messagecontract in wcf
- 【Struts0002】Difference between # , $ and % signs in Struts2
- 【Java笔记】数组传递给方法
- 1101. Quick Sort
- Chapter 1 - Introduction - 深度学习的来历 - 三次大潮
- 【ASP.Net】学习入门笔记二
- 浏览器UI线程 和 js线程
- Difference between component and directive in Angular 2
- python生产者/消费者示例
- unit 10-12笔记
- 转载的时下热门AR,对于努力方向有一定启示作用
- 1019. 数字黑洞 (20)
- <java并发编程实战>阅读总结(b)
- c++ stack
- 假期训练——POJ - 1176 Party Lamps 思维+暴力+DFS
- thinkpad p50 install nvidia driver