1. 1. Consume RESTful APIs with $resource and Restangular Angular OC September 11 2014 John R Schmidt
2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Building the Demo Angular OC Consume RESTful APIs with $resource and Restangular September 11 2014 John R Schmidt
16. 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. 17. And add our models, views and controllers. Angular OC Consume RESTful APIs with $resource and Restangular September 11 2014 John R Schmidt
18. 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. 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. 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. 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. 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. 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. 24. Angular OC Add the angular.js file. Consume RESTful APIs with $resource and Restangular September 11 2014 John R Schmidt
25. 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. 26. Angular OC Add an Angular controller. Consume RESTful APIs with $resource and Restangular September 11 2014 John R Schmidt
27. 27. Angular OC Create an Angular homepage template. Consume RESTful APIs with $resource and Restangular September 11 2014 John R Schmidt
28. 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. 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. 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. 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. 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. 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. 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. 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. 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. 37. Angular OC Use ng-repeat to display the teams. Consume RESTful APIs with $resource and Restangular September 11 2014 John R Schmidt
38. 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. 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. 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. 41. Angular OC Consume RESTful APIs with $resource and Restangular September 11 2014 John R Schmidt
42. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 59. Angular OC It works!! Consume RESTful APIs with $resource and Restangular September 11 2014 John R Schmidt
60. 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. 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. 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