ruckus/Summary.md

## index.ctp
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
angular.module('app', [])
  .controller('AppController', function($scope, $http) {
    $scope.name = "";
    $scope.flavor = "";
    $scope.sendToServer = function() {
      $http({
        cache: false,
        url: '/users/save',
        method: 'POST',
        //data: { name: 'cody', flavor: 'chocolate' },
        data: 'name=' + $scope.name = '&flavor=' + $scope.flavor,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).success(function(response) {
        // dump the whole response structure
        console.log(response);

        // show just one key
        console.log('name = %s', response.name);
      });
    };
  });
</script>

</head>
<body ng-app="app">
  <div ng-controller="AppController as app">
    <h2>Angular Sandbox</h2>

    <form>
      Name: <input type="text" ng-model="name" />
      <br />
      Flavor: <input type="text" ng-model="flavor" />
      <button ng-click="sendToServer()">Send to Server</button>
    </form>
  </div>
</body>
</html>

## routes.php
<?php

  Router::connect('/users/index', array('controller' => 'users', 'action' => 'index'));
  Router::connect('/users/load', array('controller' => 'users', 'action' => 'load'));
  Router::connect('/users/save', array('controller' => 'users', 'action' => 'save'));

?>

## Summary.md

      
    Raw
  

              Summary.md
            
          
    Summary: if you're posting a form via Content-Type: application/x-www-form-urlencoded then the data attribute itself must be a valid URL-encoded string - it CANNOT be a hash. Angular $http will not convert it to a URL-encoded format (like jQuery does).
When you run this code your cake log will have a line like:
2013-11-12 20:08:50 Error: POST: Array
(
    [name] => scott
    [flavor] => vanilla
)

With whatever you put into the Name & Flavor text inputs
This blog post has some code which can be implemented to make $http behave more like jQuery.ajax
http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

  
## UsersController.php
<?php

App::uses('AppController', 'Controller');

class UsersController extends AppController {

  public function beforeFilter() {
    $this->layout = 'ajax';
    parent::beforeFilter();
  }

  public function index() {
  }

  public function load() {
    $this->autoRender = false;

    $data = array(
      array('name' => 'Cody', 'animal' => 'monkey'),
      array('name' => 'John', 'animal' => 'bird'),
      array('name' => 'Mark', 'animal' => 'elephant'),
      array('name' => 'Rebecca', 'animal' => 'raccoon'),
    );
    echo json_encode($data);
  }

  public function save() {
    $this->autoRender = false;
    $this->log('STDIN: ' . file_get_contents("php://input"));
    $data = array('status' => 'ok', 'time' => time());

    $this->data = json_decode(file_get_contents("php://input"), true);
    // grab the name from the request and send it right back down in the response
    // to prove that we can properly read it
    $data['name'] = $this->data['name'];

    echo json_encode($data);
  }
}

?>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
	<script>
	angular.module('app', [])
	.controller('AppController', function($scope, $http) {
	$scope.name = "";
	$scope.flavor = "";
	$scope.sendToServer = function() {
	$http({
	cache: false,
	url: '/users/save',
	method: 'POST',
	//data: { name: 'cody', flavor: 'chocolate' },
	data: 'name=' + $scope.name = '&flavor=' + $scope.flavor,
	headers: {
	'Content-Type': 'application/x-www-form-urlencoded'
	}
	}).success(function(response) {
	// dump the whole response structure
	console.log(response);

	// show just one key
	console.log('name = %s', response.name);
	});
	};
	});
	</script>

	</head>
	<body ng-app="app">
	<div ng-controller="AppController as app">
	<h2>Angular Sandbox</h2>

	<form>
	Name: <input type="text" ng-model="name" />
	<br />
	Flavor: <input type="text" ng-model="flavor" />
	<button ng-click="sendToServer()">Send to Server</button>
	</form>
	</div>
	</body>
	</html>
	<?php

	Router::connect('/users/index', array('controller' => 'users', 'action' => 'index'));
	Router::connect('/users/load', array('controller' => 'users', 'action' => 'load'));
	Router::connect('/users/save', array('controller' => 'users', 'action' => 'save'));

	?>
	<?php

	App::uses('AppController', 'Controller');

	class UsersController extends AppController {

	public function beforeFilter() {
	$this->layout = 'ajax';
	parent::beforeFilter();
	}

	public function index() {
	}

	public function load() {
	$this->autoRender = false;

	$data = array(
	array('name' => 'Cody', 'animal' => 'monkey'),
	array('name' => 'John', 'animal' => 'bird'),
	array('name' => 'Mark', 'animal' => 'elephant'),
	array('name' => 'Rebecca', 'animal' => 'raccoon'),
	);
	echo json_encode($data);
	}

	public function save() {
	$this->autoRender = false;
	$this->log('STDIN: ' . file_get_contents("php://input"));
	$data = array('status' => 'ok', 'time' => time());

	$this->data = json_decode(file_get_contents("php://input"), true);
	// grab the name from the request and send it right back down in the response
	// to prove that we can properly read it
	$data['name'] = $this->data['name'];

	echo json_encode($data);
	}
	}

	?>