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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.