AngularJs 1.0 provide directive controllers, scope to write a components which contains the logic. In AngularJs 1.0 a components can be combination of directives, controllers and scope.
But in Angular 2 Components are way to write elements and logic for application.
For design a component you require at least one @Component and one @View annotation. @Component annotation specifies when a component is instantiated means when we use component in our view then it will initialized the component and called contractor and rendered the view.
When a component is instantiated, Angular
• Create DOM for the component.
• Load selected template into DOM
• Inject objects and render view
• Today I am giving one example of components.
On following example when we use the <first-component></first-component> tag in our View then component will be create, constructor will be called and component rendered.
Plnkr – http://plnkr.co/edit/IAQpVBPhgn1JSokQAux2?p=preview
index.html
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html><head><title>Understand Component in Angular 2 </title> <script> System.config({ paths: { 'app.js': 'app.js' } }); System.import('app.js'); </script></head><body> <first-component></first-component></body></html> |
<!DOCTYPE html>
<html>
<head>
<title>Understand Component in Angular 2 </title>
<script src="https://jspm.io/system@0.18.17.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
<script>
System.config({
paths: {
'app.js': 'app.js'
}
});
System.import('app.js');
</script>
</head>
<body>
<first-component></first-component>
</body>
</html>
app.es6.js
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
//Import Angularimport {Component, View, bootstrap} from 'angular2/angular2'; ///Define a component // Annotation section//@Component annotations@Component({ selector: 'first-component'})//@View annotations@View({ template: '<h1>Angular 2 - {{ message }}</h1> '})// AngularJs 2 componentclass MyComponent { name: string; constructor() { this.message = 'First Component'; }}bootstrap(MyComponent); |
//Import Angular
import {Component, View, bootstrap} from 'angular2/angular2';
///Define a component
// Annotation section
//@Component annotations
@Component({
selector: 'first-component'
})
//@View annotations
@View({
template: '<h1>Angular 2 - {{ message }}</h1> '
})
// AngularJs 2 component
class MyComponent {
name: string;
constructor() {
this.message = 'First Component';
}
}
bootstrap(MyComponent);