My previous minimal post has been quite popular, so I thought I'd do an AngularJS version. As expected, all that Angular goodness makes it even cleaner:
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="http://metawidget.org/js/3.5/metawidget-core.min.js" type="text/javascript"></script>
<script src="http://metawidget.org/js/3.5/metawidget-angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module( 'myApp', [ 'metawidget' ] )
.controller( 'myController', function( $scope ) {
$scope.person = {
firstname: 'Homer',
surname: 'Simpson',
age: 36
};
$scope.save = function() {
console.log( $scope.person );
}
} );
</script>
<style>
#metawidget {
border: 1px solid #cccccc;
width: 250px;
border-radius: 10px;
padding: 10px;
margin: 50px auto;
display: block;
}
#metawidget button {
display: block;
margin: 10px auto 0px;
}
</style>
</head>
<body ng-controller="myController">
<metawidget id="metawidget" ng-model="person">
<button ng-click="save()">Save</button>
</metawidget>
</body>
</html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="http://metawidget.org/js/3.5/metawidget-core.min.js" type="text/javascript"></script>
<script src="http://metawidget.org/js/3.5/metawidget-angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module( 'myApp', [ 'metawidget' ] )
.controller( 'myController', function( $scope ) {
$scope.person = {
firstname: 'Homer',
surname: 'Simpson',
age: 36
};
$scope.save = function() {
console.log( $scope.person );
}
} );
</script>
<style>
#metawidget {
border: 1px solid #cccccc;
width: 250px;
border-radius: 10px;
padding: 10px;
margin: 50px auto;
display: block;
}
#metawidget button {
display: block;
margin: 10px auto 0px;
}
</style>
</head>
<body ng-controller="myController">
<metawidget id="metawidget" ng-model="person">
<button ng-click="save()">Save</button>
</metawidget>
</body>
</html>
This will handily render:
Clicking the Save button will print the results to the console.
Of course Metawidget can extend this further to support form validation, alternate layouts, third-party components, and much more. To see how, the best place to start is the tutorial.
