64 lines
1.8 KiB
HTML
64 lines
1.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>angular-react hello example</title>
|
||
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
|
||
|
|
<style>
|
||
|
|
.content {
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 2em;
|
||
|
|
max-width: 800px;
|
||
|
|
margin-bottom: 50px;
|
||
|
|
line-height: 2em;
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
max-width: 768px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 1em;
|
||
|
|
text-align: center;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.header h1 {
|
||
|
|
font-size: 300%;
|
||
|
|
font-weight: 100;
|
||
|
|
margin: 0;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
.header small {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body ng-app="app" ng-controller="mainCtrl as ctrl">
|
||
|
|
<div class="content">
|
||
|
|
<div class="header">
|
||
|
|
<h1>
|
||
|
|
<div><react-component name="Hello" props="ctrl.person"/></div>
|
||
|
|
<small>
|
||
|
|
<code><react-component name="Hello" props="ctrl.person"/></code>
|
||
|
|
</small>
|
||
|
|
</h1>
|
||
|
|
<h1>
|
||
|
|
<div><hello fname="ctrl.person.fname" lname="ctrl.person.lname"/></div>
|
||
|
|
<small>
|
||
|
|
<code><hello fname="ctrl.person.fname" lname="ctrl.person.lname"/></code>
|
||
|
|
</small>
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form class="pure-form">
|
||
|
|
<fieldset>
|
||
|
|
<legend>Enter Name</legend>
|
||
|
|
<input type="text" ng-model="ctrl.person.fname" placeholder="First Name"/>
|
||
|
|
<input type="text" ng-model="ctrl.person.lname" placeholder="Last Name"/>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script src="../../bower_components/angular/angular.js"></script>
|
||
|
|
<script src="../../bower_components/react/react.js"></script>
|
||
|
|
<script src="../../bower_components/react/react-dom.js"></script>
|
||
|
|
<script src="../../ngReact.js"></script>
|
||
|
|
<script src="app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|