russelyang/html.jsp

## html.jsp
<!DOCTYPE html>
<html>

<head>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.js"></script>

<script>

System.import("angular2/core").then(function(core) {

  ParentComponent.annotations = [
    new core.Component({
      selector: 'body',
      template: '<div (click)="go()">Parent</div><child [prop1]="x"></child>',
      directives: [ChildComponent]
    })
  ];

  function ParentComponent() {
    this.x = "hello1"
  }

  ParentComponent.prototype.go = function() {
    this.x += "1"
  };

  ///

  ChildComponent.annotations = [
    new core.Component({
      selector: 'child',
      inputs: ["prop1"],
      template: '<div>Child {{prop1}}</div>',
      changeDetection: core.ChangeDetectionStrategy.OnPush
    })
  ];

  function ChildComponent() {
  }

  ////////////////

  System.import("angular2/platform/browser").then(function(browser) {
    document.addEventListener('DOMContentLoaded', function() {
      browser.bootstrap(ParentComponent);
    });
  });
});
</script>
</head>

<body>
    <my-app></my-app>
</body>
	<!DOCTYPE html>
	<html>

	<head>
	<script src="https://code.angularjs.org/tools/system.js"></script>
	<script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
	<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
	<script src="https://code.angularjs.org/2.0.0-beta.17/angular2.js"></script>

	<script>

	System.import("angular2/core").then(function(core) {

	ParentComponent.annotations = [
	new core.Component({
	selector: 'body',
	template: '<div (click)="go()">Parent</div><child [prop1]="x"></child>',
	directives: [ChildComponent]
	})
	];

	function ParentComponent() {
	this.x = "hello1"
	}

	ParentComponent.prototype.go = function() {
	this.x += "1"
	};

	///

	ChildComponent.annotations = [
	new core.Component({
	selector: 'child',
	inputs: ["prop1"],
	template: '<div>Child {{prop1}}</div>',
	changeDetection: core.ChangeDetectionStrategy.OnPush
	})
	];

	function ChildComponent() {
	}

	////////////////

	System.import("angular2/platform/browser").then(function(browser) {
	document.addEventListener('DOMContentLoaded', function() {
	browser.bootstrap(ParentComponent);
	});
	});
	});
	</script>
	</head>

	<body>
	<my-app></my-app>
	</body>