Hello Angular 2

on


AngularJs 2 have many good feature . Component is very important feature of AngularJs. Today we showing How to show simple message using AngularJs 2 Component.


Plunker - http://plnkr.co/edit/NOTX7h4JxZHUDnumJq8j?p=preview

Index.html
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
   <script src="https://jspm.io/system@0.18.17.js"></script>
   <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
   <script>
      System.config({
         paths: {
            'app.js': 'app.js'
         }
      });
      System.import('app.js');
   </script>
</head>
<body>
   <myHelloApp></myHelloApp>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
   <script src="https://jspm.io/system@0.18.17.js"></script>
   <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
   <script>
      System.config({
         paths: {
            'app.js': 'app.js'
         }
      });
      System.import('app.js');
   </script>
</head>

<body>
   <myHelloApp></myHelloApp>
</body>

</html>
 
app.es6.js
 
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//Import Angular
import {
   Component, View, bootstrap
}
from 'angular2/angular2';
///Define a component
// Annotation section
//@Component annotations
@
Component({
      selector: 'myHelloApp'
   })
   //@View annotations
   @ View({
      template: '<h1>Hello {{ ngHello }}</h1>'
   })
   // AngularJs 2 component controller
class AngularController {
   name: string;
   constructor() {
      this.ngHello = 'Angular 2';
   }
}
bootstrap(AngularController);
//Import Angular
import {
   Component, View, bootstrap
}
from 'angular2/angular2';
///Define a component
// Annotation section
//@Component annotations
@
Component({
      selector: 'myHelloApp'
   })
   //@View annotations
   @ View({
      template: '<h1>Hello {{ ngHello }}</h1>'
   })
   // AngularJs 2 component controller
class AngularController {
   name: string;
   constructor() {
      this.ngHello = 'Angular 2';
   }
}
bootstrap(AngularController);

Comments

Post a Comment