Understand components in Angular 2
Download as DOCX, PDF0 likes245 views
In Angular 2, components are used to write elements and logic for an application. Components require at least one @Component and one @View annotation. The @Component annotation specifies how a component is instantiated when used in a view, initializing the component and calling its constructor to render the view. For example, when <first-component> is used in the view, it will create the component, call its constructor, and render the component.
Understand components in Angular 2
- 2. AngularJs1.0 provide directive controllers,scope towrite acomponentswhichcontainsthe logic. In AngularJs1.0 a componentscanbe combinationof directives,controllersandscope. But inAngular2 Components are waytowrite elementsandlogicforapplication. For designacomponentyourequire atleastone @Componentand one @Viewannotation. @Componentannotationspecifieswhenacomponentis instantiatedmeans whenwe use component inour viewthenitwill initializedthe componentandcalled contractorandrenderedthe view. Whena componentisinstantiated,Angular Create DOM for the component. Load selectedtemplate intoDOM Injectobjectsandrenderview Today I am givingone example of components. On followingexample when we use the <first-component></first-component>taginour View then componentwill be create, constructorwillbe called andcomponentrendered. Plnkr - http://plnkr.co/edit/IAQpVBPhgn1JSokQAux2?p=preview Component Example in Angular 2 index.html <!DOCTYPE html> <html> <head> <title>UnderstandComponentsinAngular 2 </title> <script src="https://jspm.io/[email protected]"></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>
- 3. app.es6.js //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);
- 4. Thanks www.codeandyou.com http://www.codeandyou.com/2015/11/understand- components-in-angular-2.html Keywords - Understand Component in Angular 2, How to use Component in Angular 2, component in Angular 2, Angular 2 component