Ruby haxpert Chase Southard describes the good and bad and trouble of trying to make something with AngularJS

1. A Rubyist tries Angular
Chase Southard
KYJSUG | Sept. 2013
~ a 5 day journey ~
Thursday, September 26, 13

2. Thursday, September 26, 13

3. Thursday, September 26, 13

4. +
Thursday, September 26, 13

5. Thursday, September 26, 13

6. Black Box
Thursday, September 26, 13

7. Thursday, September 26, 13

8. Tonnage
https://github.com/chaserx/tonnage
Thursday, September 26, 13

9. Rails Model &
Controller
Thursday, September 26, 13

10. { sublime }
Thursday, September 26, 13

11. .
!"" Gemfile
!"" Gemfile.lock
!"" README.rdoc
!"" Rakefile
!"" app
# !"" assets
# # !"" images
# # !"" javascripts
# # # !"" angular
# # # # !"" controllers
# # # # # %"" weight_measurements_ctrl.js.coffee
# # # # !"" directives
# # # # %"" services
# # # # %"" weight_measurement.js.coffee
# # # !"" app.js.coffee
# # # !"" application.js
# # # !"" home.js.coffee
# # # %"" weight_measurements.js.coffee
# # %"" stylesheets
# # !"" application.css
# # !"" home.css.scss
# # %"" weight_measurements.css.scss
# !"" controllers
# # !"" application_controller.rb
# # !"" concerns
# # !"" home_controller.rb
# # %"" weight_measurements_controller.rb
# !"" helpers
# # !"" application_helper.rb
# # !"" home_helper.rb
# # %"" weight_measurements_helper.rb
# !"" mailers
# !"" models
# # !"" concerns
# # %"" weight_measurement.rb
# %"" views
# !"" home
# # %"" index.html.erb
# !"" layouts
# # %"" application.html.erb
# %"" weight_measurements
!"" bin
# !"" bundle
# !"" rails
# %"" rake
!"" bower_components
# %"" angular
# !"" angular.js
# !"" angular.min.js
# %"" bower.json
!"" config
# !"" application.rb
# !"" boot.rb
# !"" database.yml
# !"" environment.rb
# !"" environments
# # !"" development.rb
# # !"" production.rb
# # %"" test.rb
# !"" initializers
# # !"" backtrace_silencers.rb
# # !"" filter_parameter_logging.rb
# # !"" inflections.rb
# # !"" mime_types.rb
# # !"" mime_types.rb
# # !"" secret_token.rb
# # !"" session_store.rb
# # %"" wrap_parameters.rb
# !"" locales
# # %"" en.yml
# %"" routes.rb
!"" config.ru
!"" db
# !"" development.sqlite3
# !"" migrate
# # %"" 20130923000919_create_weight_measurements.rb
# !"" schema.rb
# !"" seeds.rb
# %"" test.sqlite3
!"" lib
# !"" assets
# %"" tasks
!"" log
# !"" development.log
# %"" test.log
!"" public
# !"" 404.html
# !"" 422.html
# !"" 500.html
# !"" assets
# # !"" application-1afffeb91436185f61c32d45639f5763.css
# # !"" application-1afffeb91436185f61c32d45639f5763.css.gz
# # !"" application-6b984b4c27cdb87e3c095018f44fa286.js
# # !"" application-6b984b4c27cdb87e3c095018f44fa286.js.gz
# # !"" application-9ace572d6e1deba06dd0c638399c3c2b.css
# # !"" application-9ace572d6e1deba06dd0c638399c3c2b.css.gz
# # %"" manifest-7b2fc84bf5424c2ee5d8cb0c099de0ae.json
# !"" favicon.ico
# %"" robots.txt
!"" test
# !"" controllers
# # !"" home_controller_test.rb
# # %"" weight_measurements_controller_test.rb
# !"" fixtures
# # %"" weight_measurements.yml
# !"" helpers
# # !"" home_helper_test.rb
# # %"" weight_measurements_helper_test.rb
# !"" integration
# # %"" api_weight_measurements_test.rb
# !"" mailers
# !"" models
# # %"" weight_measurement_test.rb
# %"" test_helper.rb
!"" tmp
# %"" cache
# %"" assets
# %"" development
# !"" sass
# # %"" 5587ef5cc6602d32d8b402dd40e027111957c1c9
# # !"" home.css.scssc
# # %"" weight_measurements.css.scssc
# %"" sprockets
# !"" 01cb31ac38786ee5b727bfddccd0ad14
# !"" 05d0795a34c03f1655eb8cfc49fb2eac
# !"" 07846260088cbe378436f5992acb85f2
# !"" 0c9f5a68e10c76b2d39acc37bb242e22
# !"" 0e780da7cd1c4685dc103ad4b341cc37
# !"" 10c7635fffba778e532bfed7cc4afffa
# !"" 13fe41fee1fe35b49d145bcc06610705
Thursday, September 26, 13

12. !"" app
# !"" assets
# # !"" images
# # !"" javascripts
# # # !"" angular
# # # # !"" controllers
# # # # # %"" weight_measurements_ctrl.js.coffee
# # # # !"" directives
# # # # %"" services
# # # # %"" weight_measurement.js.coffee
# # # !"" app.js.coffee
# # # !"" application.js
# # # !"" home.js.coffee
# # # %"" weight_measurements.js.coffee
# # %"" stylesheets
# # !"" application.css
# # !"" home.css.scss
# # %"" weight_measurements.css.scss
Thursday, September 26, 13

13. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/
angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-
resource.min.js"></script>
<%= javascript_include_tag "application", "data-turbolinks-track" => true
%>
</body>
</html>
Thursday, September 26, 13

14. <div ng-controller="WeightMeasurementsCtrl">
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<h1>{{message}}</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<form ng-submit="addWeightMeasurement()"
class="form-inline" role="form">
<div class="form-group">
<input type="text" ng-
model="newWeightMeasurement.value" class="form-control"
placeholder="Enter current lbs">
</div>
<button type="submit" value="Add" class="btn btn-
default">Add</button>
</form>
</div>
</div>
Thursday, September 26, 13

15. <button type="submit" value="Add" class="btn btn-
default">Add</button>
</form>
</div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<table class='table table-striped table-bordered'>
<th>Weight (lbs)</th>
<th>DateTime</th>
<tr ng-repeat="weight_measurement in
weight_measurements">
<td>{{weight_measurement.value}}</td>
<td>{{weight_measurement.created_at}}</td>
</tr>
</table>
</div>
</div>
</div>
Thursday, September 26, 13

16. App.controller 'WeightMeasurementsCtrl', ['$scope',
"WeightMeasurement", ($scope, WeightMeasurement) ->
$scope.message = "Hey there, slim! Weigh in."
$scope.weight_measurements = WeightMeasurement.query()
$scope.addWeightMeasurement = ->
weight_measurement =
WeightMeasurement.save($scope.newWeightMeasurement)
$scope.weight_measurements.push(weight_measurement)
$scope.newWeightMeasurement = {}
]
Thursday, September 26, 13

17. Resources
• http://railscasts.com/episodes/405-angularjs
• http://yoosuf.me/blog/angularjs-beginners-guide/
• http://coderberry.me/blog/2013/04/23/angularjs-on-rails-4-part-2/
• http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-
application/
• https://github.com/Jaco-Pretorius/angular-rails/blob/master/app/assets/
javascripts/controllers/todo_controller.js
• http://angularjs.org/
Thursday, September 26, 13