angular 2 hello world example

angular 2 hello world example

Hello everyone, I am going to share an interesting and basic example(angular 2 hello world) using Angular 2

I also setup the code in plnkr

      Table of contents

1.       index.html
2.       main.es6.js
3.       style.css

You can see the all code files on plnkr

The Angular 2 hello world example as given below.

<!DOCTYPE html>
    <link rel="stylesheet" href="style.css" />
    <script src="[email protected]"></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
            paths: {
                'main.js': 'main.js'
    <hello-world-example />

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

    selector: 'hello-world-example',
    providers: [myService],
    template: '<b class="color"><br/>{{helloworld}} world!"' +'<br/></b> {{curentdate}} <br/><br/><a href="{{webURL}}">Click for more detail..</a>'

class myApp {
    constructor(service: myService) {
        this.helloworld = service.getMesg();
        this.curentdate =service.getDate();
        this.webURL =service.getWebURL();

class myService {
    getMesg() {
        return 'Welcome you, in Angular 2! "Hello';
        return new Date();
        return ""

//Start aplication from here.

The live demo example as given below.


Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions