AngularJS SignIt!
After finishing my first experimental project in AngularJS, I wanted to try saving data, rather than just retrieving it. Angular has some great mechanisms for creating forms, so I put together a small application to test out more of what Angular has to offer. Oh, and I also wanted to build this using Yeoman. More on that in a minute.
The app I ended up with is a petition signer. A user chooses a petition from the select-box, enters a first name, last name and email into the form, and then signs the signature pad either by drawing with the mouse, or using a finger on a touchscreen. Hitting the Save button will capture the information, and add it to the list of signatories for the selected petition. Pretty simple, no?
The really fun part comes when the data is saved. Depending on the url, the application will choose a place to save the data. If ‘parse’ shows up in the url path, then Parse.com is used as the back-end. If the application is hosted on StackMob’s server, then data is stored with StackMob.com. If neither of these things occur, then data is just saved to a temporary Backbone collection and cleared out when you refresh the page.
Try it out!
- SignIt! – No saving, just signing
- SignIt! – Save signatures to Parse
- SignIt! – Try the StackMob version
Please note that a modern browser is needed. This will not work on IE8 or lower. I have only tested it in the latest Chrome, Firefox 15, and Safari on iOS 5. YMMV with other browsers. If I find the time, I’ll add in the fixes for IE later on.
Get the Code: https://github.com/ericterpstra/ngSignIt
A few more things…
Aside from AngularJS, Parse, and StackMob, I threw in plenty of other nifty libraries and snippets to get this thing working and looking (kinda) nice.
- The select2 component, wrapped in a directive provided by Angular-UI. Angular-UI is a great add-on library for AngularJS that provides some neat widgets and additional functionality to directives.
- HTML5 SignaturePad jQuery plugin from Thomas Bradley.
- responsive stylesheet (try it on mobile!)
- A font-face generated from fontsquirrel.com using Estrya’s Handwriting font.
- Stack of paper CSS3 snippet from CSS-Tricks.com
And, of course, Yeoman was involved. There is tons of functionality built into Yeoman for handling unit-tests, live compilation of SASS and CoffeeScript, dependency management, and other stuff. I basically just used it for it’s AngularJS scaffolding, and to download some libraries via Bower. It went something like this:
cd ngSignIt
yeoman install jquery
yeoman install json2
... etc ...
Then I went about building my application as usual. Upon completion, I ran
to package everything that is needed into the ‘dist’ folder, and plopped that on my web server. Done.
// TODO
In upcoming blog posts, I’ll go over some of the more interesting bits of code – namely the services module and custom directives. There are a fair number of comments in the code now, but I think a higher-level overview would add some value. Stay tuned.
November 10, 2012 at 9:20 am
Awesome, looking forward to seeing the overview of custom directives
January 15, 2013 at 4:30 am
Hi
June 15, 2013 at 9:33 pm
Great call on using the Angular UI library. It has ton of useful functions
December 12, 2015 at 8:09 pm
the details of one of the atcahted files (the last one) because that’s what I needed for my particular application. Hopefully this saves someone time in the future:// ADDED BY AJAY// Put the results in the csv file if needed (only saves last atcahted file!)if($save_msg_to_csv){// CSV doesn’t aren’t exist on the server? Let’s create itif(!file_exists($csv_filesrc)){// Create a new CSV with the right heading$header = array(‘date’,’from’,’subject’,’body’, ‘filename’, ‘size’, ‘mime’);$new_csv = fopen($csv_filesrc, ‘w’);fputcsv($new_csv, $header);fclose($new_csv);}// Tack on the data to the existing CSV file$date = date(‘m/d/Y h:i:s a’, time());// Go through the atcahted files and keep the information for only the last one$filesar = Array();foreach($saved_files as $f => $data){$filesar[‘f’] = $f;$filesar[‘size’] = $data[‘size’];$filesar[‘mime’] = $data[‘mime’];}$new_row = array($date, $from_email, $subject, $body, $filesar[‘f’], $filesar[‘size’], $filesar[‘mime’]);$csv = fopen($csv_filesrc, ‘a’);fputcsv($csv, $new_row);fclose($csv);}Keep up the good work stuporglue!
August 17, 2016 at 3:31 pm
The sample application here: https://ericterpstra.com/apps/ngSignIt/#/ is not working. Looks like there are missing script references.
Appreciate it if you could check the code and fix so that I can try it out.
Tarek
January 25, 2017 at 9:50 pm
Sorry, this is really, really old, and I’m not too interested in updating it. StackMob and Parse aren’t even in business any more. The code is available on GitHub, so you may be able to get it working yourself if you like: https://github.com/ericterpstra/ngSignIt