Loading
 
What's Next: View All Tutorial →

Angular JS 2 - Quick start - Hello world program

Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:   ...

Published Date: 06/12/2016  Last Modified Date: 06/12/2016    New Post




Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:
 
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

Keywords to Know:

import  { Component } from '@angular/core'  -  This import the Component class from the "@angular/core" package.

It is like same as "import java.util.ArrayList" java import statment


`@Component - It is a decoractor in the Typescript language, which uses configuration object to create the component.

selector:  the selector contains the css selector string, if you include the selector in the html tag, the html defined in the template will be overwritten with the angular js,

The variable value that want to generate the html content can be defined the user defined class name "AppCompent"


Here, name is the class field variable, having value 'Angular', That is accessed in the html using String interpolation {{ }}

Program output:


Input:

If the html has 

<body>
<my-app></my-app>
</body>


Output:

Hello Angular


Live Example :

Click here to see live example, 

https://angular.io/resources/live-examples/setup/ts/eplnkr.html



Check out the link for the local development set up.

https://angular.io/docs/ts/latest/guide/setup.html
Awaiting for Administrator approval




← Back to list


Related Post




×