joeRinehart · August 16, 2012 22:03
diff --git a/application.js b/application.js
 // Create a TodoController for Angular
 function TodoController( $scope, $routeParams, $http ) {

    // description for a new todo
    $scope.description = ""
    
    // bindable list of todos
    $scope.todos = []

    // load all todos, copying to the "todos" list on success
    $scope.loadTodos = function() {
        $http.get("todo/ajaxList").success( function( data ) {
            $scope.todos = data
        })
    }

    // save a new todo, based on the "description" property
    $scope.addTodo = function() {
        $http.post(
            "todo/ajaxSave",
            {
                description : $scope.description
            }
        ).success( function( data ) {
            $scope.todos = data
            $scope.description = ""
        })
    }

    // mark a todo complete, reloading the whole list on success
    $scope.complete = function( id ) {
        $http.post("todo/ajaxComplete?id=" + id).success( function( data ) {
            $scope.loadTodos()
        })
    }

    // when we first stat up, load todos
    $scope.loadTodos()
 }
diff --git a/index.html b/index.html
 <!doctype html>

 <!-- Adding 'ng-app' tells Angular to start its magic at this point in the DOM -->
 <html ng-app>
 <head>
    <title>Todo</title>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
 </head>

 <!-- Anything inside here should use the $scope of TodoController -->
 <body ng-controller="TodoController">

    <!-- When this form is submitted, cancel the action and run TodoController.addTodo() -->
    <form ng-submit="addTodo()">
        <!-- Bind the value of this text input to TodoController.description -->
        <input placeholder="New Todo" type="text" style="width:400px" ng-model="description" />
        <input type="submit" value="Ok" />
    </form>

    <table>
        <!-- Do this for every Todo in TodoController.todos -->
        <tr ng-repeat="todo in todos">
            <td>
                <!-- Call complete( id ) for this one when it's clicked -->
                <input type="checkbox" ng-click="complete( todo.id )" checked="{{ todo.completed }}" id="{{ todo.id }}" />
                <label for="{{ todo.id }}">{{ todo.description }}</label>
            </td>
        </tr>
    </table>

 <script src="js/angular-1.0.1.min.js"></script>
 <script src="js/application.js"></script>
 </body>
 </html>
diff --git a/TodoController.groovy b/TodoController.groovy
 package angulartodo

 import org.springframework.dao.DataIntegrityViolationException
 import grails.converters.JSON

 class TodoController {

    static allowedMethods = [ajaxList: "GET", ajaxSave: "POST", ajaxComplete: "POST"]

    /**
     * Query for all incomplete Todos and return them as a JSON array
     */
    def ajaxList() {
        render Todo.findAll( "from Todo t where t.complete = false order by t.dateCreated asc" ) as JSON
    }

    /**
     * Get the description from the request's JSON structure, then return
     * the current list of Todos
     */
    def ajaxSave() {
        def todo = new Todo(
            description : request.JSON.description,
            complete : false
        ).save( failOnError : true )

        ajaxList()
    }

    /**
     * Mark whichever Todo desired complete
     */
    def ajaxComplete() {
        def todo = Todo.get( params.id )
        
        if ( todo )
        {
            todo.complete = true
            todo.save()
        }

        render ""
    }
 }
	// Create a TodoController for Angular
	function TodoController( $scope, $routeParams, $http ) {

	// description for a new todo
	$scope.description = ""

	// bindable list of todos
	$scope.todos = []

	// load all todos, copying to the "todos" list on success
	$scope.loadTodos = function() {
	$http.get("todo/ajaxList").success( function( data ) {
	$scope.todos = data
	})
	}

	// save a new todo, based on the "description" property
	$scope.addTodo = function() {
	$http.post(
	"todo/ajaxSave",
	{
	description : $scope.description
	}
	).success( function( data ) {
	$scope.todos = data
	$scope.description = ""
	})
	}

	// mark a todo complete, reloading the whole list on success
	$scope.complete = function( id ) {
	$http.post("todo/ajaxComplete?id=" + id).success( function( data ) {
	$scope.loadTodos()
	})
	}

	// when we first stat up, load todos
	$scope.loadTodos()
	}
	<!doctype html>

	<!-- Adding 'ng-app' tells Angular to start its magic at this point in the DOM -->
	<html ng-app>
	<head>
	<title>Todo</title>
	<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
	<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
	</head>

	<!-- Anything inside here should use the $scope of TodoController -->
	<body ng-controller="TodoController">

	<!-- When this form is submitted, cancel the action and run TodoController.addTodo() -->
	<form ng-submit="addTodo()">
	<!-- Bind the value of this text input to TodoController.description -->
	<input placeholder="New Todo" type="text" style="width:400px" ng-model="description" />
	<input type="submit" value="Ok" />
	</form>

	<table>
	<!-- Do this for every Todo in TodoController.todos -->
	<tr ng-repeat="todo in todos">
	<td>
	<!-- Call complete( id ) for this one when it's clicked -->
	<input type="checkbox" ng-click="complete( todo.id )" checked="{{ todo.completed }}" id="{{ todo.id }}" />
	<label for="{{ todo.id }}">{{ todo.description }}</label>
	</td>
	</tr>
	</table>

	<script src="js/angular-1.0.1.min.js"></script>
	<script src="js/application.js"></script>
	</body>
	</html>
	package angulartodo

	import org.springframework.dao.DataIntegrityViolationException
	import grails.converters.JSON

	class TodoController {

	static allowedMethods = [ajaxList: "GET", ajaxSave: "POST", ajaxComplete: "POST"]

	/**
	* Query for all incomplete Todos and return them as a JSON array
	*/
	def ajaxList() {
	render Todo.findAll( "from Todo t where t.complete = false order by t.dateCreated asc" ) as JSON
	}

	/**
	* Get the description from the request's JSON structure, then return
	* the current list of Todos
	*/
	def ajaxSave() {
	def todo = new Todo(
	description : request.JSON.description,
	complete : false
	).save( failOnError : true )

	ajaxList()
	}

	/**
	* Mark whichever Todo desired complete
	*/
	def ajaxComplete() {
	def todo = Todo.get( params.id )

	if ( todo )
	{
	todo.complete = true
	todo.save()
	}

	render ""
	}
	}