Add scaffold
Make a little spreadsheet kinda
We'll start with two simple cells: one for input, and one for output. We'll use ```<input>``` tags for both of them, so that Bootstrap styles them the same.
Let's add our Angular.js dependency, and wire up the two cells. We put an ```ng-app``` attribute on our container div, which tells Angular to compile and parse that element and its children as an Angular app.

We also bind the value of out input cell to the model value ```cell```. We haven't set up a controller with ```ng-controller```, but that's ok &mdash; Angular will use the global ``` rootScope``` bind ```rootScope.cell``` to the our input value. We've also bound the contents of the output element to ```rootScope.cell```, so any changes in the first input element should be mirrored in the output element.
Whoops! Looks like ```ng-bind``` isn't going to work for us &mdash; [Angular's ng-bind implementation uses jQuery's .text() method, which won't work with an input element](https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L53).

That's ok: we'll use a div instead. We'll style it resembles our input somewhat.
Let's start wiring this up! We'll add an ```ng-controller``` attribute to our container div, and set it to ```spreadsheet```. Now rather, than attaching our view to the ```rootScope```, it will look in the global window object for a function named ```spreadsheet```, and use that as a factory function to build our controller object.

To test that our factory function is working, we'll have it set the starting value of ```$scope.cell``` to "hello spreadsheet!", and see if it shows up in the view.
Alright &mdash; let's start evaluating expressions. We're going to do that using Angular's built-in ```$parse``` service.

```$parse``` takes an Angular expression and transforms it into a function. That function takes a scope object, and then evaluates the expression in the context of that scope. In our prior version,
 the ```cell``` expression in ```ng-bind="cell"``` is transformed into something like this: ```function(scope) { return scope['cell'];};```. An expression in something like ```ng-bind="f()"``` would be transformed into something like ```function(scope) { return scope[f]();}```.

Angular uses ```$parse``` to let users create context-sensitive bindings and callbacks in the view, but we're going to use ```$parse``` for our own purposes. We'll parse the contents of the input cell, and turn it into a function we can evaluate.

We do that in our ```compute()``` method with ```$parse($scope.cell)``` to create a function from the expression in the cell.  We call that imediately, passing in our current scope like so: ```$parse($scope.cell)($scope)```. By passing in our ```$scope``` object to the function, we make values on our scope available to the expression, which will be important later.

Due to Angular's change-watching system, any changes to the contents of input cell will cause ```$scope.compute()``` to re-evaluate, and update our div. Try it out with a few arithmetic expressions: e.g., ```52163 / 16604```.
Alright, let's start turning this into a spreadsheet. We'll use ```position: absolute``` to place the input and output on top of each other, and get rid of the Bootstrap CSS. The input is pink, and the output is light purple.

When the cell is not focused, we want to show the computed result of the expression. We do that by placing the output cell on top of the input cell. We also want to show the unevaluated expression when we click on the cell. To do that, we'll pass all click events through the out using ```pointer-event: none```. Any clicks to the output will be passed through to the input cell behind it, allowing the input element to get focus. We'll then use a CSS sibling selector to hide the output when the input is selected like so: ```input:focus .ouput { display: none; }```.
Let's turn this into a spreadsheet!

Instead of having a single cell, we're going to have an object called ```$scope.cells``` that maps names of cells like 'A1' or 'C4' to their current expression.

We also have a list of our columns (```$scope.columns```) and rows (```$scope.rows```). We use ```ng-repeat``` to create a ```<tr>``` element for row, and a ```<td>``` element to each column. Inside that ```<td>``` we have the same input and output div as before, except that they're now bound to a value in the ```$scope.cells``` object.

Because we pass in our ```$scope``` object when evaluating our expressions, you can reference other cells within an expression by calling ```compute``` manually &mdash; try setting the value of cell 'A1' to ```2```, and the value of cell 'A2' to ```compute('A1') * 5```.
Let's add some row and column labels. We add a ```<tr>``` before our row ```ng-repeat``` to create the column labels, and adding a ```<td>``` on each row for the row labels.
Rather than make users type ```compute(A1)```, you should be able to just type 'A1'. We'll add a preprocessor that finds anything that looks like a cell reference, and turns it into a call to ``compute```.
Merge branch 'master' of github.com:graunked/spreadsheet