- 1. Front-end Finesse Taming your templates with Angular et al.
Matthew Bennett-Lovesey @undecisive matt @
bennett-lovesey.co.uk
2. UPDATE!!! If clicking links in a rails app causes angular to
fail, add this to application.js.coffee Have added some Javascript
alternatives, if that's your thing. It's not mine. It might be
yours. 3. Menu About this presentation About the content of this
presentation About how angular.js applies to the content of this
presentation About the application that we'll be applying
angular.js to during the content of this presentation PROFIT! 4.
What is angular.js? Javascript framework Template driven MVC 5.
What are we building? Coverletter generator Beautiful, dynamic 6.
Getting started Tell your rails gemfile that you want to use
angular bundle install rails g angular:install Restart your server
7. Angular controller for CoverLetter rails generate
angular:controller cover_letter where cover_letter is the name of
your model 8. Controller is produced Note: The plugin uses
coffeescript by default. Coffeescript is beautiful. 9. Tell your
page to use the controller. In your layout and your index page
Note: ng-app and ng- controller are Angular.js constructs 10. If
all is correct... 11. Let's make it do something $scope is nothing
magic 12. Then tweak your page {{ }} are something magic does the
same, but better. 13. Erm... 14. Let's do something useful We're
creating cover letters, right? We want to click a checkbox, and
update our cover letter I'll assume you've added all the needed
bits to the 'new' action's view... 15. Demo 16. Let's change our
view 17. And the controller too I skimmed over building the
needed_skills array, so for anyone interested, here's the skinny!
In coffeescript, for loops are not just loops, they're an
implementation of map / collect. For example: a = for x in [1, 2,
3] # a becomes [3, 6, 9] x * 3 Loops are also inlineable, just like
if statements in ruby. Inlined loops will repeat the assignment,
the last assignment would win, and a become 9. So we use brackets
to ensure our loop returns the full array: a = (x * 3 for x in
[1,2,3]) 18. And for the Javascript lovers... (Note: I wrote this
from scratch, rather than generating from the coffeescript. The
generated javascript might have contained some optimisations, but
would have been a little less readable. But I love you guys, so I
wrote readable javascript. You're welcome.) 19. End of Demo 20.
Recap Anywhere you put {{ angular_expression }}, it will fill that
space with $scope.angular_expression It magically knows when
angular_expression changes You can bind an input to an expression
using Whenever the input is changed, the data on the $scope object
is also changed. 21. Getting ruby to do an angular job 22. Services
get the data Create a service The service grabs stuff using AJAX
Create a method on the service 23. Managing your app the angular
way ng-src and ng-href ng-repeat Filters: {{ data | filter |
another_filter }} Validators: ng-maxlength, etc Testing: Karma 24.
We're too lazy for that though 25. Things I've ignored Filters
Routing Turbolinks doesn't like angular (see slide 2) pretty much
everything else. 26. Conclusions Do not use this for anything that
needs to be seen by google. Services do exist to do this (
http://www.angularjsseo.com/) but why bother? Use angular
sparingly, or a lot. Don't expect to do anything in-between.
