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/system@0.18.17.js"></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.