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 http://embed.plnkr.co/jI6Nro/

      Table of contents

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

You can see the all code files on plnkr http://embed.plnkr.co/jI6Nro/

The Angular 2 hello world example as given below.

//index.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script src="https://jspm.io/[email protected]"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
    <script>
        System.config({
            paths: {
                'main.js': 'main.js'
            }
        });
        System.import('main.js');
    </script>
</head>
<body>
    <hello-world-example />
</body>
</html>


//main.es6.js
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';


@Component({
    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';
    }
 
    getDate(){
        return new Date();
    }
 
    getWebURL(){
        return "http://www.code-sample.com/"
    }
}

//Start aplication from here.
bootstrap(myApp);


The live demo example as given below.



ANIL SINGH

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 - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book