Building a Spreadsheet in Angular.js

[David Graunke]

Hi all,

I just put up a blog post walking through creating a toy spreadsheet in Angular, and thought y'all might find it interesting: http://thomasstreet.net/blog/spreadsheet.html

Angular's change-propagation model ended up being perfect for creating a spreadsheet, and the $parse service worked nicely to handle arithmetic expressions in the spreadsheet cells.

The goal was to show what sort of things you can accomplish with just a little bit of Angular, not to create a functional, useful spreadsheet app.

If anyone has any suggestions of how I could have made the app more elegant or stated it better, I'd love to hear it! I put up a Plunkr of the final result here, if anyone wants to play around with it.

Best,

David Graunke

thomasstreet.net 

[zdam]

Hi I haven't had time to read the content yet, but I love the blog layout and particularly your code snippets with previous code being struck-out.  What are using to achieve this?

[David Graunke]

Thanks for the kind words!

The code snippets are generated by a little tool I wrote, which you can find at https://github.com/graunked/step-by-step. It steps through a Git repo commit by commit, using the commit message as an explanation, showing the current state of the code in an escaped <code> block, with the diffs calculated by Git, and placing the unescaped code in an iFrame.

I just pushed it up to Github today, so it's missing any documentation, and could use some cleanup. I'll try to update it in the next couple days, so follow the Github repo if you want to see it in a better state!

David Graunke

thomasstreet.net

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/-MnLW_FxTVA/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[David Graunke]

Whoops -- broke that link somehow. Should've pointed here: https://github.com/graunked/step-by-step

- David

On Monday, May 6, 2013 8:37:38 PM UTC-7, David Graunke wrote:

Thanks for the kind words!

The code snippets are generated by a little tool I wrote, which you can find at https://github.com/graunked/step-by-step. It steps through a Git repo commit by commit, using the commit message as an explanation, showing the current state of the code in an escaped <code> block, with the diffs calculated by Git, and placing the unescaped code in an iFrame.

I just pushed it up to Github today, so it's missing any documentation, and could use some cleanup. I'll try to update it in the next couple days, so follow the Github repo if you want to see it in a better state!

David Graunke

thomasstreet.net

On Mon, May 6, 2013 at 8:22 PM, zdam <adam.k...@gmail.com> wrote:

Hi I haven't had time to read the content yet, but I love the blog layout and particularly your code snippets with previous code being struck-out.  What are using to achieve this?

On Tuesday, 7 May 2013 10:58:10 UTC+10, David Graunke wrote:

Hi all,

I just put up a blog post walking through creating a toy spreadsheet in Angular, and thought y'all might find it interesting: http://thomasstreet.net/blog/spreadsheet.html

Angular's change-propagation model ended up being perfect for creating a spreadsheet, and the $parse service worked nicely to handle arithmetic expressions in the spreadsheet cells.

The goal was to show what sort of things you can accomplish with just a little bit of Angular, not to create a functional, useful spreadsheet app.

If anyone has any suggestions of how I could have made the app more elegant or stated it better, I'd love to hear it! I put up a Plunkr of the final result here, if anyone wants to play around with it.

Best,

David Graunke

thomasstreet.net 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/-MnLW_FxTVA/unsubscribe?hl=en-US.

To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.

[Kirk Hadjitofis]

why not use simple eval() in compute function ?

[David Graunke]

Hi Kirk,

I chose $parse rather than eval because it evaluates expressions in the context of a scope we pass in. This means:

  1.  We can refer to data on our $scope object, e.g.,  we can access $scope.compute as compute.

  2.  By evaluating expressions in a limited scope, $parse effectively sanitizes the expressions. Compare eval("alert('Hey!')") to $parse("alert('Hey!')")($scope).  

The cell evaluation code could be refactored so that we pass in an object besides our $scope, for example, one that has keys A1, A2, etc, that point to evaluation functions for those cells. Then we could remove the cell reference regex, and prevent the cells from accessing things on the $scope object that they're not supposed to.

Hope that makes sense!

Best,

David Graunke

thomasstreet.net

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/-MnLW_FxTVA/unsubscribe?hl=en-US.

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[AW]

A simple =D1*D2 expression does not appear to work in this spreadsheet. Is there an example of an Angular JS spreadsheet that can calculate Excel-like Math Functions?