Skip to content

Instantly share code, notes, and snippets.

@dai-shi
Last active August 29, 2015 14:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save dai-shi/79936997298219d56116 to your computer and use it in GitHub Desktop.
Save dai-shi/79936997298219d56116 to your computer and use it in GitHub Desktop.
famou.us angular sample (single HTML file)
<html ng-app="MyApp">
<head>
<title>famo.us angular sample</title>
<link type="text/css" href="//code.famo.us/famous/0.2/famous.css" rel="stylesheet" />
<link type="text/css" href="//cdn.rawgit.com/Famous/famous-angular/fee2b717a53ad762c9e3157580ce255901f4ccad/dist/famous-angular.min.css" rel="stylesheet" />
<script type="text/javascript" src="//code.famo.us/lib/require.js"></script>
<script type="text/javascript" src="//code.famo.us/famous/0.2/famous.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/Famous/famous-angular/fee2b717a53ad762c9e3157580ce255901f4ccad/dist/famous-angular.min.js"></script>
<script type="text/javascript">
angular.module('MyApp', ['famous.angular'])
.controller('MyController', ['$scope', function($scope) {
$scope.items = [];
for (var y = 0; y < 1; y += 0.1) {
for (var x = 0; x < 1; x += 0.1) {
$scope.items.push({x: x, y: y, color: 'yellow'});
}
}
}]);
</script>
</head>
<body ng-controller="MyController">
<fa-app>
<fa-modifier ng-repeat="item in items" fa-origin="[item.x, item.y]">
<fa-surface fa-size="[30, 20]" fa-click="item.color = 'red'" fa-background-color="item.color" fa-properties="{textAlign: 'center', lineHeight: '20px'}">{{$index}}</fa-surface>
</fa-modifier>
</fa-app>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment