<html>
<head>
<title>Tour of Heroes</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/Rx.umd.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2-all.umd.dev.js"></script>
<!-- 2. Load our 'modules' -->
<script src="app/app.component.js"></script>
<script src="app/main.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
# Tour of Heroes
## 2. The Hero Editor
Implementation of [Angular 2 tutorial](https://angular.io/docs/ts/latest/tutorial/toh-pt1.html) in javascript
[On my GitHub](https://github.com/maxim-yakupov/maxim-yakupov.github.io/tree/fa91fa5bb4456a38836e3127b49d9cde10e8e39a/angular2-quickstart)
(function(app) {
/* global ng */
function Hero(id, name) {
this.id = id;
this.name = name;
}
app.AppComponent =
ng.core.Component({
"selector" : 'my-app',
"template" : `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div>
<label>id: </label>{{hero.id}}
</div>
<div>
<label>name: </label>
<div>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>
`
})
.Class({
constructor: function() {
this.title = 'Tour of Heroes';
this.hero = new Hero(1, 'Windstorm');
}
});
})(window.app || (window.app = {}));
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));