Skip to content

Instantly share code, notes, and snippets.

@flanger001

flanger001/angular.html

Last active February 29, 2016 12:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flanger001/afd885e34ce4f27ea7e4 to your computer and use it in GitHub Desktop.
Save flanger001/afd885e34ce4f27ea7e4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
angular.html
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title>Angular</title>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js'></script>
<script>
angular.module('myApp', [])
.controller('Person', function($scope) {
var data = {
name: 'John Smith',
imgUrl: 'http://lorempixel.com/200/200/',
hobbyList: ['coding', 'writing', 'skiing']
};
$scope.data = data;
})
.directive('profile', [function() {
return {
scope: {
person: '='
},
template: '<h3>{{person.name}}</h3><p><img src={{person.imgUrl}} /></p>'
};
}])
.directive('hobbies', [function() {
return {
scope: {
person: '='
},
template: '<h5>My hobbies</h5><ul><li ng-repeat="hobby in person.hobbyList">{{hobby}}</li></ul>'
};
}]);
</script>
</head>
<body>
<div ng-controller='Person'>
<profile person="data"></profile>
<hobbies person="data"></hobbies>
</div>
</body>
</html>
Raw
react.html
<!DOCTYPE html>
<html>
<head>
<title>Your First React Project</title>
</head>
<body>
<div id="content"></div>
<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script type="text/jsx">
var DATA = {
name: 'John Smith',
imgUrl: 'http://lorempixel.com/200/200/',
hobbyList: ['coding', 'writing', 'skiing']
};
var App = React.createClass({
render: function() {
return (
<div><Profile name={this.props.profileData.name} imgUrl={this.props.profileData.imgUrl} /> <Hobbies hobbyList={this.props.profileData.hobbyList} /></div>
);
}
});
var Profile = React.createClass({
render: function() {
return (
<div><h3>{this.props.name}</h3><img src={this.props.imgUrl} /></div>
);
}
});
var Hobbies = React.createClass({
render: function() {
var hobbies = this.props.hobbyList.map(function(hobby, key){
return (<li key={key}>{hobby}</li>);
});
return (<div><h5>My hobbies</h5><ul>{hobbies}</ul></div>
);
}
});
ReactDOM.render(<App profileData={DATA} />, document.getElementById('content'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment