<!doctype html>
<html>
<head>
<title>angular 2 Form</title>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<userFormTemplate></userFormTemplate>
</body>
</html>
/* Styles go here */
/* Larger Side Border */
.tb8 {
width: 230px; height:24px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
.testbutton {
font-family: arial;
color: #14396A !important;
font-size: 14px;
text-shadow: 1px 1px 0px #7CACDE;
box-shadow: 1px 1px 1px #BEE2F9;
padding: 10px 25px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #3866A3;
background: #63B8EE;
background: linear-gradient(top, #63B8EE, #468CCF);
background: -ms-linear-gradient(top, #63B8EE, #468CCF);
background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF));
background: -moz-linear-gradient(top, #63B8EE, #468CCF);
}
.testbutton:hover {
color: #14396A !important;
background: #468CCF;
background: linear-gradient(top, #468CCF, #63B8EE);
background: -ms-linear-gradient(top, #468CCF, #63B8EE);
background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
background: -moz-linear-gradient(top, #468CCF, #63B8EE);
}
var appForm = function() {
this.user = {};
};
var userFormTemplate = '<h1> Angular 2 User Form Template </h1> <br/> User Name: <input type="text" class="tb8"> <br> Confirm User Name <input type="text" class="tb8"> <br> <input type="button" value="Submit" class="testbutton">'
appForm.annotations = [
new angular.Component({
selector: 'userFormTemplate'
}),
new angular.View({
template: userFormTemplate
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(appForm);
});