AngularJSで簡単なタスクアプリを作成しました。
コードは以下の通りです。
index.html
lang
1<!DOCTYPE html> 2<html lang="ja" ng-app> 3<head> 4 <meta charset="UTF-8"> 5 <title>TaskApp</title> 6 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 7 <script src="myscript.js"></script> 8 <style> 9 .done-true { 10 color:gray; 11 text-decoration:line-through; 12 } 13 </style> 14</head> 15<body> 16 <h1>Todo list</h1> 17 <div ng-controller="mainCtrl"> 18 <p>Finished Task: {{getDoneCount()}} / {{tasks.length}} 19 <button ng-click="deleteDone()">Delete Finished</button> 20 </p> 21 <ul> 22 <li ng-repeat="task in tasks"> 23 <input type="checkbox" ng-model="task.done"> 24 <span class="done-{{task.done}}">{{task.body}}</span> 25 <a href ng-click="tasks.splice($index,1)">[x]</a> 26 </li> 27 </ul> 28 <form ng-submit="addNew()"> 29 <input type="text" ng-model="newTaskBody"> 30 <input type="submit" value="add"> 31 </form> 32 </div> 33</body> 34</html>
myscript.js
lang
1var mainCtrl = function($scope) { 2 $scope.tasks = [ 3 {"body":"do this 1", "done":false}, 4 {"body":"do this 2", "done":false}, 5 {"body":"do this 3", "done":true}, 6 {"body":"do this 4", "done":false} 7 ]; 8 $scope.addNew = function() { 9 $scope.tasks.push({"body":$scope.newTaskBody,"done":false}); 10 $scope.newTaskBody = ''; 11 } 12 $scope.getDoneCount = function() { 13 var count = 0; 14 angular.forEach($scope.tasks, function(task) { 15 count += task.done ? 1 : 0; 16 }); 17 return count; 18 } 19 $scope.deleteDone = function() { 20 var oldTasks = $scope.tasks; 21 $scope.tasks = []; 22 angular.forEach(oldTasks, function(task) { 23 if (!task.done) $scope.tasks.push(task); 24 }); 25 } 26}
このアプリをRailsと組み合わせたいのですが、Rails上でAngularJSを導入する方法が分かりません。
イメージとしては、フロントサイドをAngularJSで、サーバーサイドをRailsという感じです。
初歩的な質問ですがよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2014/11/20 16:03