Sunday, February 12, 2017

Angular 2 - Components

Description

The component is a controller class with a template which mainly deals with a view of the application and logic on the page. It is a bit of code can be used throughout an application. The component knows how to render itself and configure dependency injection.

The component contains two important things; one is view and another one is some logic.

Example

The below example describes use of component in the Angular 2:
<!DOCTYPE html>
<html>
   <head>
      <title>Angular 2 Component</title>
      <!--Load libraries -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
      <script src="https://code.angularjs.org/tools/system.js"></script>
      <script src="https://code.angularjs.org/tools/typescript.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
      <script>
         System.config({
            //transpiler tool converts TypeScript to JavaScript
            transpiler: 'typescript',

            //emitDecoratorMetadata flag used by JavaScript output to create metadata from the decorators
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {'app': {defaultExtension: 'ts'}},
            map: { 'app': './angular2/src/app' }
         });
         System.import('app/component_main')
            .then(null, console.error.bind(console));
      </script>
   </head>
   <!--When Angular calls the bootstrap function in main.ts, it reads the Component metadata, finds the 'app' selector, locates an element tag named app, and loads the application between those tags.-->
   <body>
      <app>Loading...</app>
   </body>
</html>
The above code includes the following configuration options:
  • You can configure the index.html file using typescript version. The SystemJS transpile the TypeScript to JavaScript before running the application by using the transpiler option.
  • If you do not transpile to JavaScript before running the application, you could see the compiler warnings and errors which are hidden in the browser.
  • The TypeScript generates metadata for each and every class of the code when the emitDecoratorMetadata option is set. If you don't specify this option, large amount of unused metadata will be generated which affects the file size and impact on the application runtime.
  • Angular 2 includes the packages form the app folder where files will have the .ts extension.
  • Next it will load the main component file from the app folder. If there is no main component file found, then it will display the error in the console.
  • When Angular calls the bootstrap function in main.ts, it reads the Component metadata, finds the 'app' selector, locates an element tag named app, and loads the application between those tags.
To run the code, you need the following TypeScript(.ts) files which you need to save under the app folder.
component_main.ts 
import {bootstrap} from "angular2/platform/browser";  //importing bootstrap function
import {App} from "./component_app.component"         //importing component function

bootstrap(App);
Now we will create a component in TypeScript(.ts) file which we will create component and view for the component.
component_app.component.ts 
// component's metadata can be accessed using this primary Angular library
import {Component, View} from "angular2/core";

//framework recognizes @Component annotation and knows that we are trying to create a new component
@Component({
   selector: 'app'  //specifies selector for HTML element named 'app'
})

@View({
  //template property holds component's companion template that tells Angular how to render a view
  template: '<h2>Welcome to {{name}}</h2>'
})

export class App {
   name : 'Tutorialspoint!!!'
}

Output

When you run the above code, it will display the text specified within the template option which is defined in the component_app.component.ts file and holds component's companion template that tells Angular how to render a view.
Let's carry out the following steps to see how above code works:
  • Save above HTML code as index.html file as how we created in environment chapter and use the above app folder which contains .ts files.
  • Open the terminal window and enter the below command:
    npm start
  • After few moments, a browser tab should open and displays the output as shown below.
OR you can run this file in another way:
  • Save above HTML code as angular2_components.html file in your server root folder.
  • Open this HTML file as http://localhost/angular2_components.html and output as below gets displayed.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)