python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions