Consume RESTful APIs with $resource and Restangular
Preview:
Citation preview
- 1. Consume RESTful APIs with $resource and Restangular Angular
OC September 11 2014 John R Schmidt
- 2. How can we connect an Angular JS application with a back end
RESTful application on the server? Angular OC Consume RESTful APIs
with $resource and Restangular September 11 2014 John R
Schmidt
- 3. How can we connect an Angular JS application with a back end
RESTful application on the server? 3 tools are available: Angular
OC Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 4. How can we connect an Angular JS application with a back end
RESTful application on the server? 3 tools are available: $http
$resource Restangular Angular OC Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 5. $http : an Angular service that sends and receives data from
a server with low level protocols Angular OC Consume RESTful APIs
with $resource and Restangular September 11 2014 John R
Schmidt
- 6. $http : an Angular service that sends and receives data from
a server with low level protocols $resource : an Angular service
for communicating with RESTful backends Angular OC Consume RESTful
APIs with $resource and Restangular September 11 2014 John R
Schmidt
- 7. $http : an Angular service that sends and receives data from
a server with low level protocols $resource : an Angular service
for communicating with RESTful backends Restangular : a third party
alternative to $resource Angular OC Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 8. We'll create a simple demo app which will: Create a quick
RESTful backend with Rails Angular OC Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 9. We'll create a simple demo app which will: Create a quick
RESTful backend with Rails Embed an Angular app within our Rails
app Angular OC Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt
- 10. We'll create a simple demo app which will: Create a quick
RESTful backend with Rails Embed an Angular app within our Rails
app Use the $resource service to read and write data to and from
the Rails server with POST, PUT and GET actions Angular OC Consume
RESTful APIs with $resource and Restangular September 11 2014 John
R Schmidt
- 11. We'll create a simple demo app which will: Create a quick
RESTful backend with Rails Embed an Angular app within our Rails
app Use the $resource service to read and write data to and from
the Rails server with POST, PUT and GET actions Quickly substitute
Restangular for $resource to execute GET actions Angular OC Consume
RESTful APIs with $resource and Restangular September 11 2014 John
R Schmidt
- 12. Angular OC Consume RESTful APIs with $resource and
Restangular (Since we thought this presentation was going to happen
in July ...) September 11 2014 John R Schmidt
- 13. Angular OC Consume RESTful APIs with $resource and
Restangular (Since we thought this presentation was going to happen
in July ...) FIFA 2014 World Cup Schedule & Results September
11 2014 John R Schmidt
- 14. Team model Name:string Match model Team1_id:integer
Team2_id:integer MatchDate:date Score1:integer Score2:integer The
models for the demo app: Angular OC Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 15. Building the Demo Angular OC Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 16. First, let's create a RESTful backend with Rails. Angular
OC Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 17. And add our models, views and controllers. Angular OC
Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 18. Run the Rails migration to initialize the database with our
models. Angular OC Consume RESTful APIs with $resource and
Restangular September 11 2014 John R Schmidt
- 19. And prepopulate the app with some data prior to running the
demo. Angular OC Consume RESTful APIs with $resource and
Restangular September 11 2014 John R Schmidt
- 20. Use the Rails controller generator to add a 'Rails Home'
controller and view to act as the home/index from the Rails
perspective. Then route the Rails root to its index. We'll put the
Angular view inside there. Angular OC Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 21. After customizing the Rails_Home index.html.erb created by
the Rails controller generator: Angular OC Consume RESTful APIs
with $resource and Restangular September 11 2014 John R
Schmidt
- 22. Now we can add a simple Angular app, integrated into our
Rails app. Angular OC Consume RESTful APIs with $resource and
Restangular September 11 2014 John R Schmidt
- 23. Angular OC Add our initial Angular directives to the HTML
tags. September 11 2014 John R Schmidt Consume RESTful APIs with
$resource and Restangular
- 24. Angular OC Add the angular.js file. Consume RESTful APIs
with $resource and Restangular September 11 2014 John R
Schmidt
- 25. Angular OC Create the fifa.coffee file. (Rails will
automatically compile to JS.) Consume RESTful APIs with $resource
and Restangular September 11 2014 John R Schmidt
- 26. Angular OC Add an Angular controller. Consume RESTful APIs
with $resource and Restangular September 11 2014 John R
Schmidt
- 27. Angular OC Create an Angular homepage template. Consume
RESTful APIs with $resource and Restangular September 11 2014 John
R Schmidt
- 28. Angular OC Add angular-route.js and configure Angular
routing to direct the app to the template. Consume RESTful APIs
with $resource and Restangular September 11 2014 John R
Schmidt
- 29. Angular OC One more item in order to successfully mix Rails
with Angular: Edit the Rails manifest file for javascript assets
(app/javascripts/application.js) to add fifa.js, angular.js and
angular-route.js, and remove turbolinks. Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 30. Angular OC Now we have a working Angular app running inside
a Rails app. Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt
- 31. Angular OC Now for the showdown! We'll start with $resource
first. Let's set this up to display a list of teams retrieved from
the server with the Angular $resource service. Several steps are
needed to accomplish this: Consume RESTful APIs with $resource and
Restangular September 11 2014 John R Schmidt
- 32. Angular OC Add the $resource service. We also need to add a
third party service called ng-rails-csrf. This will allow Angular
to send and receive RESTful data through the Rails cross service
reference forgery protections. Consume RESTful APIs with $resource
and Restangular September 11 2014 John R Schmidt
- 33. Angular OC Add the necessary dependencies to the
controller. We need the $http and $resource services ($resource
depends on $http), and a variable to hold the base URL for teams.
Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 34. Angular OC After setting the value for the team_url
constant, we can define a teams_resource object using the $resource
service. Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt
- 35. Angular OC If we define a $scope.teams model to be the
result of applying the query() method to $scope.teams_resource,
then $scope.teams will be bound to the Teams table in the database.
Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 36. Angular OC Consume RESTful APIs with $resource and
Restangular The Batarang dev tool shows us that we now have the
data available to the scope of the ng-view div. September 11 2014
John R Schmidt
- 37. Angular OC Use ng-repeat to display the teams. Consume
RESTful APIs with $resource and Restangular September 11 2014 John
R Schmidt
- 38. Angular OC Now let's add match data for each team. Create a
constant for the Matches base URL and add it as a dependency.
Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 39. Angular OC Define a matches_resource object and a
corresponding $scope.matches model. Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 40. Angular OC Nest an ng-repeat directive for matches inside
the ng-repeat for teams, configured to only show matches for the
current team. Format the output as desired. Consume RESTful APIs
with $resource and Restangular September 11 2014 John R
Schmidt
- 41. Angular OC Consume RESTful APIs with $resource and
Restangular September 11 2014 John R Schmidt
- 42. Angular OC Now let's try submitting data to the server with
Angular and $resource. We already have a form which was created by
Rails for adding new matches. Consume RESTful APIs with $resource
and Restangular Let's substitute an Angular form. September 11 2014
John R Schmidt
- 43. Angular OC This is our new Angular based form for adding
new matches. Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt
- 44. Angular OC We'll store our data from the form as attributes
of a model called $scope.new_match. Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 45. Angular OC By using the comprehensions syntax on the
ng-options directive, we get a pull down list of team names on the
select tag. Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt
- 46. Angular OC The $resource service defines a number of
RESTful mehods. We need to define a function which calls the save()
function on the $scope.matches_resource object. We'll call that
function $scope.create_match(). Consume RESTful APIs with $resource
and Restangular September 11 2014 John R Schmidt
- 47. Angular OC By using the create_match() function which we've
just defined as an attribute on an ng-click directive, we can
create a button which, when clicked, will communicate with the
server to create the new match. Note that a submit tag is not
required. Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt
- 48. Angular OC Now we can add the final four games to our
database. Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt
- 49. Angular OC Now let's add a form to input the scores
separately for games that don't have them yet. First, we'll add
logic to separate the matches with no scores yet and display them
at the top of the list. Consume RESTful APIs with $resource and
Restangular September 11 2014 John R Schmidt
- 50. Angular OC And make a form for each scoreless match.
Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 51. Angular OC Add a button to submit the form, with a value of
update_match(match) for the ng-click directive. Consume RESTful
APIs with $resource and Restangular September 11 2014 John R
Schmidt Then we add the update_match() function to our
controller.
- 52. Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt In order for this to work with
ng-resource, we need to add an update action to
$scope.matches_resource with method PUT. Angular OC
- 53. Angular OC Now we can update matches by adding the scores.
Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 54. Angular OC Now let's try to convert this from $resource to
Restangular. Let's see if we can accomplish the change without
altering the HTML file. Consume RESTful APIs with $resource and
Restangular September 11 2014 John R Schmidt
- 55. Angular OC First we need to add the restangular.js file in
place of the angular-resource.js file. Also, restangular.js
requires as a dependency either jquery or lodash.js (a lightweight
jquery substitute). We edit the Rails manifest file accordingly.
Consume RESTful APIs with $resource and Restangular September 11
2014 John R Schmidt
- 56. Angular OC We need to set up a base URL for Angular. We
didn't do this for $resource because we had to configure them
individually for each resource (Match and Team). Consume RESTful
APIs with $resource and Restangular September 11 2014 John R
Schmidt
- 57. Angular OC Add Restangular as a dependency and inject it
into the controller. Consume RESTful APIs with $resource and
Restangular September 11 2014 John R Schmidt
- 58. Angular OC Change the Teams query to substitute the
Restangular format for the $resource format and ... Consume RESTful
APIs with $resource and Restangular September 11 2014 John R
Schmidt
- 59. Angular OC It works!! Consume RESTful APIs with $resource
and Restangular September 11 2014 John R Schmidt
- 60. Angular OC We observe some clues as to how Restangular does
its magic by looking at one of the models, where we see that
Restangular has added nearly 40 values for its own bookeeping
purposes. Consume RESTful APIs with $resource and Restangular
September 11 2014 John R Schmidt
- 61. Angular OC Make the same change to the Matches query and we
can perform a GET for matches also. Consume RESTful APIs with
$resource and Restangular September 11 2014 John R Schmidt
- 62. Angular OC More information on Restangular can be found at:
github.com/mgonto/restangular Consume RESTful APIs with $resource
and Restangular September 11 2014 John R Schmidt