A Rubyist Tries AngularJS

A Rubyist tries Angular

Chase Southard

KYJSUG | Sept. 2013

~ a 5 day journey ~

Thursday, September 26, 13

+


Black Box


Tonnagehttps://github.com/chaserx/tonnage


https://github.com/chaserx/tonnage

https://github.com/chaserx/tonnage

Rails Model & Controller


{ sublime }


.!"" 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# # !"" 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# !"" 1638f87db345b13872695759502b54fe# !"" 23608343fc0bfe68d8b3617de96713d6# !"" 271f7abe1b2491c4edcf4428201e503d# !"" 2f5173deea6c795b8fdde723bb4b63af# !"" 31e2f171d732e48279239bdace5df19a# !"" 357970feca3ac29060c1e3861e2c0953# !"" 3665aa30fefe8e40fe1f86cc5f90de35# !"" 3c28c8560e1add28ac2ed612e90c0876# !"" 3cea20626bd7dac360f17597f0fc3d32# !"" 46ef378397125ec6711c3a9782ba5ca2# !"" 53ee1d7e03b00d22b2a857cb890929ef# !"" 54cdff0285eedd8758e4f11642442350# !"" 5de11ab19fd73fbc75008c8e10ecd74f# !"" 5e1e4f6bce922b079984c027545ee4d8# !"" 68e4ff6e55927576dac882752b6f6dab# !"" 695ccd0d7bda81ab2d2378cc4482db8c# !"" 73cf352579b646a784a2780873ee5ea8# !"" 74b5eddd0adaa0a9e90f34ef3a5457fd# !"" 7b2dd5ec82b544f8b046d9be5db40dd4# !"" 7c36c5fee186f5b6d3840e673b0c7c75# !"" 7e9c41e56b736cb56c4ddc9f39ef2a87# !"" a9d374e029370a71bd85d3e0f10ca09d# !"" af687b1e5bdbbf2e83c76e8c89830cc9# !"" b2d5f7347dfc9165e9b7b9e0bd0306be# !"" b366f2d5591e48626614e8bdf4bc1498# !"" b40fd9a2f69daf4a50195d6976a4c369# !"" bbfd01de081ba68a529be1e7a4c26c5f# !"" c48dda847d10536787a1a256d5bed15e# !"" cc951a27e5ebe9a0f3136dba9a924e6c# !"" cffd775d018f68ce5dba1ee0d951a994# !"" d0e2bbaeb25721ab7d50447a9cd1acc1# !"" d771ace226fc8215a3572e0aa35bb0d6# !"" e0a40c66c75956304aa9b9908197710c# !"" e41af18c68f24842c24cd009a9c5a635# !"" ef3c89e7add6def4f045f9f34aa81b0d# !"" f1663d34d4b6003379113df98f1433a5# %"" f7cbd26ba1d28d48de824f0e94586655%"" vendor %"" assets !"" css # !"" bootstrap-theme.css # !"" bootstrap-theme.min.css # !"" bootstrap.css # %"" bootstrap.min.css !"" fonts # !"" glyphicons-halflings-regular.eot # !"" glyphicons-halflings-regular.svg # !"" glyphicons-halflings-regular.ttf # %"" glyphicons-halflings-regular.woff !"" javascripts !"" js # !"" bootstrap.js # %"" bootstrap.min.js %"" stylesheets

.!"" 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# # !"" 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# !"" 1638f87db345b13872695759502b54fe# !"" 23608343fc0bfe68d8b3617de96713d6# !"" 271f7abe1b2491c4edcf4428201e503d# !"" 2f5173deea6c795b8fdde723bb4b63af# !"" 31e2f171d732e48279239bdace5df19a# !"" 357970feca3ac29060c1e3861e2c0953# !"" 3665aa30fefe8e40fe1f86cc5f90de35# !"" 3c28c8560e1add28ac2ed612e90c0876# !"" 3cea20626bd7dac360f17597f0fc3d32# !"" 46ef378397125ec6711c3a9782ba5ca2# !"" 53ee1d7e03b00d22b2a857cb890929ef# !"" 54cdff0285eedd8758e4f11642442350# !"" 5de11ab19fd73fbc75008c8e10ecd74f# !"" 5e1e4f6bce922b079984c027545ee4d8# !"" 68e4ff6e55927576dac882752b6f6dab# !"" 695ccd0d7bda81ab2d2378cc4482db8c# !"" 73cf352579b646a784a2780873ee5ea8# !"" 74b5eddd0adaa0a9e90f34ef3a5457fd# !"" 7b2dd5ec82b544f8b046d9be5db40dd4# !"" 7c36c5fee186f5b6d3840e673b0c7c75# !"" 7e9c41e56b736cb56c4ddc9f39ef2a87# !"" a9d374e029370a71bd85d3e0f10ca09d# !"" af687b1e5bdbbf2e83c76e8c89830cc9# !"" b2d5f7347dfc9165e9b7b9e0bd0306be# !"" b366f2d5591e48626614e8bdf4bc1498# !"" b40fd9a2f69daf4a50195d6976a4c369# !"" bbfd01de081ba68a529be1e7a4c26c5f# !"" c48dda847d10536787a1a256d5bed15e# !"" cc951a27e5ebe9a0f3136dba9a924e6c# !"" cffd775d018f68ce5dba1ee0d951a994# !"" d0e2bbaeb25721ab7d50447a9cd1acc1# !"" d771ace226fc8215a3572e0aa35bb0d6# !"" e0a40c66c75956304aa9b9908197710c# !"" e41af18c68f24842c24cd009a9c5a635# !"" ef3c89e7add6def4f045f9f34aa81b0d# !"" f1663d34d4b6003379113df98f1433a5# %"" f7cbd26ba1d28d48de824f0e94586655%"" vendor %"" assets !"" css # !"" bootstrap-theme.css # !"" bootstrap-theme.min.css # !"" bootstrap.css # %"" bootstrap.min.css !"" fonts # !"" glyphicons-halflings-regular.eot # !"" glyphicons-halflings-regular.svg # !"" glyphicons-halflings-regular.ttf # %"" glyphicons-halflings-regular.woff !"" javascripts !"" js # !"" bootstrap.js # %"" bootstrap.min.js %"" stylesheets


!"" 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


<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> <div class="row"> </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>


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 = {}]


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/


http://railscasts.com/episodes/405-angularjs

http://railscasts.com/episodes/405-angularjs

http://yoosuf.me/blog/angularjs-beginners-guide/

http://yoosuf.me/blog/angularjs-beginners-guide/

http://coderberry.me/blog/2013/04/23/angularjs-on-rails-4-part-2/

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/

http://angularjs.org/

A Rubyist Tries AngularJS

Technology

Transcript of A Rubyist Tries AngularJS