SlideShare una empresa de Scribd logo
1 de 20
Descargar para leer sin conexión
AngularJS for Rubyists
It’s like sinatra but for clients

Tom Cartwright
@tomcartwrightuk
!

keepmebooked.com
tomcartwright.net
Framework or library?
Library

Framework

Backbone

Angular

It has conventions (well sort of)

Ember
Rails setup
config/routes.rb

app/controllers/angular_controller.rb

app/views/angular/app.html.erb
This blank template is needed to stop rails freaking out - there
is almost certainly a better way of handling this.
Define an app
Setup some routing
app/assets/javascripts/app/app.js
…and a controller
app/assets/javascripts/app/controllers.js
A rendered page
As if by magic
…some binding occurs

…but how?
Dirty checking
Check $scopes and copy

Check again against the copies

Repaint DOM if required
Server communication
$resource service
app/assets/javascripts/app/resources.js
Err.. no
app/assets/javascripts/app/resources.js

app/assets/javascripts/app/controllers.js
Promises
Testing

For unit testing - use Jasmine
spec/javascripts/controller…/dashboardControllerSpec.js
spec/javascripts/controller…/dashboardControllerSpec.js

Huzzah!
Directives
The API is doesn’t have to be the source of truth
Thank you $watching
$scope.$watch('forQuestions', !
function(silence, question) {!
console.log(possibleEruditeResponse);!
}!
});

Github ・Twitter
@tomcartwrightuk

Like the sound of this AngularJS stuff? Keepmebooked is hiring

Más contenido relacionado

La actualidad más candente

RoR 101: Session 6
RoR 101: Session 6RoR 101: Session 6
RoR 101: Session 6Rory Gianni
 
Ruby on Rails - UNISO
Ruby on Rails - UNISORuby on Rails - UNISO
Ruby on Rails - UNISOLucas Renan
 
RoR 101: Session 1
RoR 101: Session 1RoR 101: Session 1
RoR 101: Session 1Rory Gianni
 
Ruby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter BootstrapRuby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter BootstrapMarcio Marinho
 
Namespace less engine
Namespace less engineNamespace less engine
Namespace less engineshaokun
 
Using assm in service object
Using assm in service object Using assm in service object
Using assm in service object Railwaymen
 

La actualidad más candente (6)

RoR 101: Session 6
RoR 101: Session 6RoR 101: Session 6
RoR 101: Session 6
 
Ruby on Rails - UNISO
Ruby on Rails - UNISORuby on Rails - UNISO
Ruby on Rails - UNISO
 
RoR 101: Session 1
RoR 101: Session 1RoR 101: Session 1
RoR 101: Session 1
 
Ruby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter BootstrapRuby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter Bootstrap
 
Namespace less engine
Namespace less engineNamespace less engine
Namespace less engine
 
Using assm in service object
Using assm in service object Using assm in service object
Using assm in service object
 

Destacado

γλώσσες της αφρικής
γλώσσες της αφρικήςγλώσσες της αφρικής
γλώσσες της αφρικήςHellenicSoul
 
Lab Report on Cognos Insight
Lab Report on Cognos InsightLab Report on Cognos Insight
Lab Report on Cognos InsightShaily Dubey
 
Environment analysis
Environment analysisEnvironment analysis
Environment analysisShaily Dubey
 
θρησκείες της αφρικής
θρησκείες της αφρικήςθρησκείες της αφρικής
θρησκείες της αφρικήςHellenicSoul
 
Hipertensi¢n arterial
Hipertensi¢n arterialHipertensi¢n arterial
Hipertensi¢n arterialPiero Simeón
 
πολιτισμός της αφρικής
πολιτισμός της αφρικήςπολιτισμός της αφρικής
πολιτισμός της αφρικήςHellenicSoul
 
Chapitre 27 - V. L’exemple de la guérison
Chapitre 27 - V. L’exemple de la guérison Chapitre 27 - V. L’exemple de la guérison
Chapitre 27 - V. L’exemple de la guérison Pierrot Caron
 
Jorge enriquez scorpion ptt s.a de c.v.docx
Jorge enriquez scorpion ptt s.a de c.v.docxJorge enriquez scorpion ptt s.a de c.v.docx
Jorge enriquez scorpion ptt s.a de c.v.docxJorge Enríquez
 

Destacado (13)

γλώσσες της αφρικής
γλώσσες της αφρικήςγλώσσες της αφρικής
γλώσσες της αφρικής
 
Lab report watson
Lab report watsonLab report watson
Lab report watson
 
Lab Report on Cognos Insight
Lab Report on Cognos InsightLab Report on Cognos Insight
Lab Report on Cognos Insight
 
Environment analysis
Environment analysisEnvironment analysis
Environment analysis
 
θρησκείες της αφρικής
θρησκείες της αφρικήςθρησκείες της αφρικής
θρησκείες της αφρικής
 
Lestte Propaganda
Lestte PropagandaLestte Propaganda
Lestte Propaganda
 
Hipertensi¢n arterial
Hipertensi¢n arterialHipertensi¢n arterial
Hipertensi¢n arterial
 
πολιτισμός της αφρικής
πολιτισμός της αφρικήςπολιτισμός της αφρικής
πολιτισμός της αφρικής
 
Chapitre 27 - V. L’exemple de la guérison
Chapitre 27 - V. L’exemple de la guérison Chapitre 27 - V. L’exemple de la guérison
Chapitre 27 - V. L’exemple de la guérison
 
Gcc
GccGcc
Gcc
 
Jorge enriquez scorpion ptt s.a de c.v.docx
Jorge enriquez scorpion ptt s.a de c.v.docxJorge enriquez scorpion ptt s.a de c.v.docx
Jorge enriquez scorpion ptt s.a de c.v.docx
 
Rei kawakubo
Rei kawakuboRei kawakubo
Rei kawakubo
 
Ukiyo e
Ukiyo eUkiyo e
Ukiyo e
 

Similar a Angular for rubyists

Content-Driven Web Applications with Magnolia CMS and Ruby on Rails
Content-Driven Web Applications with Magnolia CMS and Ruby on RailsContent-Driven Web Applications with Magnolia CMS and Ruby on Rails
Content-Driven Web Applications with Magnolia CMS and Ruby on Railsbkraft
 
Plug it on!... with railties
Plug it on!... with railtiesPlug it on!... with railties
Plug it on!... with railtiesrails.mx
 
2011-02-03 LA RubyConf Rails3 TDD Workshop
2011-02-03 LA RubyConf Rails3 TDD Workshop2011-02-03 LA RubyConf Rails3 TDD Workshop
2011-02-03 LA RubyConf Rails3 TDD WorkshopWolfram Arnold
 
Rails Metal, Rack, and Sinatra
Rails Metal, Rack, and SinatraRails Metal, Rack, and Sinatra
Rails Metal, Rack, and SinatraAdam Wiggins
 
Connecting the Worlds of Java and Ruby with JRuby
Connecting the Worlds of Java and Ruby with JRubyConnecting the Worlds of Java and Ruby with JRuby
Connecting the Worlds of Java and Ruby with JRubyNick Sieger
 
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular jscodeandyou forums
 
Liftweb
LiftwebLiftweb
LiftwebScalac
 
.NET Architects Day - DNAD 2011
.NET Architects Day - DNAD 2011.NET Architects Day - DNAD 2011
.NET Architects Day - DNAD 2011Fabio Akita
 
09 - Fábio Akita - Além do rails
09 - Fábio Akita - Além do rails09 - Fábio Akita - Além do rails
09 - Fábio Akita - Além do railsDNAD
 
Sharing the pain using Protractor
Sharing the pain using ProtractorSharing the pain using Protractor
Sharing the pain using ProtractorAnand Bagmar
 
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017   ember.js - escape the javascript fatigueNode.js meetup 17.05.2017   ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigueTobias Braner
 
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)Binary Studio
 
AngularJS meets Rails
AngularJS meets RailsAngularJS meets Rails
AngularJS meets RailsElena Torró
 
End-to-end web-testing in ruby ecosystem
End-to-end web-testing in ruby ecosystemEnd-to-end web-testing in ruby ecosystem
End-to-end web-testing in ruby ecosystemAlex Mikitenko
 
Introduction To Ruby On Rails
Introduction To Ruby On RailsIntroduction To Ruby On Rails
Introduction To Ruby On RailsSteve Keener
 

Similar a Angular for rubyists (20)

Content-Driven Web Applications with Magnolia CMS and Ruby on Rails
Content-Driven Web Applications with Magnolia CMS and Ruby on RailsContent-Driven Web Applications with Magnolia CMS and Ruby on Rails
Content-Driven Web Applications with Magnolia CMS and Ruby on Rails
 
JavaScript Unit Testing
JavaScript Unit TestingJavaScript Unit Testing
JavaScript Unit Testing
 
Speedy TDD with Rails
Speedy TDD with RailsSpeedy TDD with Rails
Speedy TDD with Rails
 
Serverless Apps with AWS Step Functions
Serverless Apps with AWS Step FunctionsServerless Apps with AWS Step Functions
Serverless Apps with AWS Step Functions
 
Plug it on!... with railties
Plug it on!... with railtiesPlug it on!... with railties
Plug it on!... with railties
 
RubyConf Brazil 2011
RubyConf Brazil 2011RubyConf Brazil 2011
RubyConf Brazil 2011
 
2011-02-03 LA RubyConf Rails3 TDD Workshop
2011-02-03 LA RubyConf Rails3 TDD Workshop2011-02-03 LA RubyConf Rails3 TDD Workshop
2011-02-03 LA RubyConf Rails3 TDD Workshop
 
Rails Metal, Rack, and Sinatra
Rails Metal, Rack, and SinatraRails Metal, Rack, and Sinatra
Rails Metal, Rack, and Sinatra
 
Connecting the Worlds of Java and Ruby with JRuby
Connecting the Worlds of Java and Ruby with JRubyConnecting the Worlds of Java and Ruby with JRuby
Connecting the Worlds of Java and Ruby with JRuby
 
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
 
Liftweb
LiftwebLiftweb
Liftweb
 
.NET Architects Day - DNAD 2011
.NET Architects Day - DNAD 2011.NET Architects Day - DNAD 2011
.NET Architects Day - DNAD 2011
 
09 - Fábio Akita - Além do rails
09 - Fábio Akita - Além do rails09 - Fábio Akita - Além do rails
09 - Fábio Akita - Além do rails
 
Sharing the pain using Protractor
Sharing the pain using ProtractorSharing the pain using Protractor
Sharing the pain using Protractor
 
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017   ember.js - escape the javascript fatigueNode.js meetup 17.05.2017   ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
 
Testing AngularJS
Testing AngularJSTesting AngularJS
Testing AngularJS
 
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
 
AngularJS meets Rails
AngularJS meets RailsAngularJS meets Rails
AngularJS meets Rails
 
End-to-end web-testing in ruby ecosystem
End-to-end web-testing in ruby ecosystemEnd-to-end web-testing in ruby ecosystem
End-to-end web-testing in ruby ecosystem
 
Introduction To Ruby On Rails
Introduction To Ruby On RailsIntroduction To Ruby On Rails
Introduction To Ruby On Rails
 

Último

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 

Último (20)

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 

Angular for rubyists