Hello everyone, Today's I am going to share a interesting article about quick start Angular 2 with ES6.
The Angular 2 is still under heavy development and the Angular 2 development team working on it and you can go and know about Angular 2 developers and Keynote presenters by web https://angularu.com/ng/
Go and see the live demo http://embed.plnkr.co/pDrQyKVclWSaWLsBkrOF/preview
I am going to explain baby steps about angular 2 what are required to setup before start TODO app in Angular 2 with ES6.
There are four steps to create Angular 2 TODO app with ES6 as given below.
1. In the first step, we create an entry point for HTML file where users will start.
2. In the second step, we load the Angular 2 libraries at the top of the file. i.e.
3. In the third step, we make a root component for your applications.
4. In the fourth step, import to Bootstrap Angular 2
In the below created entry point example,
@WebComponent annotation defines the HTML tag for the component by specifying the component's CSS selector and @WebView annotation defines the HTML that represents the component.
The example to create an entry point and setup the starting web component as given below.
Create an Entry Point
import {
ComponentAnnotation as WebComponent,
ViewAnnotation as WebView, bootstrap
} from 'angular2/angular2';
//Create web component in es6
@WebComponent({
selector: 'WelcomeApp',
appInjector: [WebService]
})
//Create web view in es6
@WebView({
template: '{{welcome}} Angular 2!'
})
//Create web class in es6
class WebApp {
constructor(service: WebService) {
this.welcome = service.welcome();
setTimeout(() => this.welcome = 'Welcome in Angular 2 with ES6 app,', 1000);
}
};
//Create web service in es6
class WebService {
welcome() {
return 'Hello';
}
};
bootstrap(WebApp);
Setup the starting web component
<!DOCTYPE html>
<html>
<head>
<script src="https://jspm.io/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.27/angular2.dev.js"></script>
<script>
System.import('main');
</script>
</head>
<body>
<div>
<welcomeapp></welcomeapp>
</div>
<a href="http://www.code-sample.com/">By Anil Singh</a>
</body>
</html>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|