Permalink
Browse files

added angular todo ex

  • Loading branch information...
kylefritz committed May 17, 2012
1 parent 5833703 commit f9cb05f6d77f1142cd7e76badd6c3c65c928eecb
Showing with 64 additions and 3 deletions.
  1. +4 −0 app.rb
  2. +6 −1 public/css/screen.css
  3. +21 −0 public/js/angular-todo.js
  4. +19 −0 views/angular_todo.erb
  5. +14 −2 views/layout.erb
View
4 app.rb
@@ -65,6 +65,10 @@ def get_client
erb :angularjs
end
+get '/todo' do
+ erb :angular_todo
+end
+
get '/status-codes' do
haml :status_codes
end
View
@@ -15,4 +15,9 @@ https://github.com/twitter/bootstrap/issues/306
/end sticky footer
-*/
+*/
+
+.done-true {
+ text-decoration: line-through;
+ color: grey;
+}
View
@@ -0,0 +1,21 @@
+function TodoCtrl($scope){
+ $scope.todos=[{text:'learn angular', done:false},
+ {text:'be a mitten', done:true}];
+
+ $scope.addTodo=function(){
+ $scope.todos.push({text:$scope.todoText, done:false});
+ $scope.todoText="";
+ };
+
+ $scope.remaining=function(){
+ return _.filter($scope.todos,
+ function(todo){ return !todo.done; }).length;
+ };
+
+ $scope.archive=function(){
+ $scope.todos=_.filter($scope.todos, function(todo){
+ return !todo.done;
+ });
+ };
+
+}
View
@@ -0,0 +1,19 @@
+<script src="<%=url('/js/angular-todo.js')%>"></script>
+
+
+<h2>TODO</h2>
+<div ng-controller="TodoCtrl">
+ <span>{{remaining()}} of {{todos.length}} remaining</span>
+ [<a href="" ng-click="archive()">archive</a>]
+ <ul>
+ <li ng-repeat="todo in todos">
+ <input type="checkbox" ng-model="todo.done">
+ <span class="done-{{todo.done}}">{{todo.text}}</span>
+ </li>
+ </ul>
+ <form ng-submit="addTodo()">
+ <input type="text" ng-model="todoText" size="30"
+ placeholder="add new todo here">
+ <input class="btn-primary" type="submit" value="add">
+ </form>
+</div>
View
@@ -7,6 +7,7 @@
<link href='/css/bootstrap-responsive.css' rel='stylesheet' type='text/css'>
<link href='/css/screen.css' rel='stylesheet' type='text/css'>
<!--eliminate template flash-->
+ <script src='http://documentcloud.github.com/underscore/underscore-min.js'></script>
<script src="http://code.angularjs.org/angular-1.0.0rc8.min.js"></script>
</head>
<body>
@@ -29,6 +30,19 @@
back to slash
</a>
</li>
+
+ <li>
+ <a href='http://localhost:5000/angularjs'>
+ angular hello world
+ </a>
+ </li>
+ <li>
+ <a href='http://localhost:5000/todo'>
+ todo app
+ </a>
+ </li>
+
+
</ul>
</div>
</div>
@@ -41,7 +55,5 @@
Kyle Fritz &copy; 2012
</div>
</div>
- <script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
- <script src='/js/bootstrap.js'></script>
</body>
</html>

0 comments on commit f9cb05f

Please sign in to comment.