Angular 2 Tutorial

Angular 2 Tutorial Angular2

HTML

<!DOCTYPE html>
<html>
  <head>
    <!-- We set the base href -->
    <script>document.write('<base href="' + document.location + '" />');</script>
   
    <title>Angular 2 Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS file -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
   
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- IE polyfills, keep the order please -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    
    <!-- Agular 2 -->
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
    
    <!-- Agular 2 Router -->
    <script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>
     <!-- Config Agular 2 and Typescript -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- Run the application -->
  <my-app>
     loading...
  </my-app>

</html>
<!-- 
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/ 
-->

CSS

.angular-2-tutorial {
                           background-color:#D3F3F4;
                           font-weight:bold;
                        }
                         
                        h3 {
                         color:#07C6F7;
                        }
                        h4 {
                         color:#5894F0;
                         font-size:12px;
                        }

TypeScript

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';
import {ReplaySubject} from 'rxjs/ReplaySubject'
import {combineAll} from 'rxjs/operators'

@Component({
    selector: 'my-app',
    template: `{{currentData$ | json}}`,

})
export class Angular2TutorialComponent {

	currentData$: ReplaySubject();
  gps$: ReplaySubject();
  compass$: ReplaySubject();
  
  constructor() {
  	this.initObservables();
  }
	
  initObservables() {
  	this.gps$ = new ReplaySubject();
    this.compass$ = new ReplaySubject();
    
    this.currentData$ = this.gps$.combineAll(this.compass$);
  }
  
}


/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {bootstrap} from 'angular2/platform/browser';
import {Angular2TutorialComponent} from "./angular-2-tutorial.component";


bootstrap( Angular2TutorialComponent); 
/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/ 
*/