Quick start Angular 2 with ES6 example

Angular 2 | Building the simple todos app with Angular 2 and ES6 | First app with Angular 2

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/

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.
               a.      https://jspm.io/system.js
      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

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 - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.