ngularjs - files.meetup.com · make points. if you haven’t already, go read the angular style...
TRANSCRIPT
![Page 1: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/1.jpg)
ngularJS
Presented by Dustin Goodman (@dustinsgoodman)
Powered by
Creating API Services
![Page 2: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/2.jpg)
Who am I?
• 4+ years as a RoR dev
• 3+ year working in AngularJS
• Web Developer at Springbot for the past year
![Page 3: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/3.jpg)
DisclaimerThis is a talk on AngularJS and how to implement API services using its framework utilities. This is not a talk on user interface (UI) and user experience (UX). As such, there are tons of things in the demonstration proportion of this talk that are really bad UI/UX and frankly, I don’t care because they’re excellent for the purposes of this talk because it clearly defines how to utilize these tools. That being said, there are examples in this demo unrelated to the APIs themselves that go against best practices for AngularJS in order to make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices and as an exercise, fork my code and fix it yourself.
TL;DR: I did bad things intentionally, …..
![Page 4: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/4.jpg)
APIs• Application Program Interface -
Google Maps, YouTube, Twitter, Amazon
• APIs make your boring Single Page Applications (SPA) interesting!
• Web APIs are what we’ll use in Angular
![Page 5: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/5.jpg)
RESTful API• Representational State Transfer
• software architecture style consisting of guidelines and best practices for creating scalable web services
• REST Verbs: GET, POST, PUT, PATCH, DELETE
• Routes should use nouns
![Page 6: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/6.jpg)
Using HTTP APIs in Angular• write API calls in controllers
• write API services
• use jQuery AJAX library!
• write unit tests
• use an API spec
• use a standard for APIs like the JSON API
![Page 7: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/7.jpg)
What are services?• Provides a DRY interface for
creating reusable controller code
• Acts as a singleton => Great for REST communication & session data (if in an SPA)
• Can share among controllers through dependency injection
![Page 8: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/8.jpg)
$http• “The $http service is a core Angular service that
facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.”
• Super simple API similar to that of jQuery’s AJAX
• TL;DR: You want data from a server with AngularJS, this is how you get it.
![Page 9: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/9.jpg)
$http - The API
• 7 core methods: get, head, post, put, delete, jsonp, patch
• get, delete, head, jsonp take a path and config
• post, put, patch take path, “data”, and config
• config takes in headers, query params, and other request based params (see docs)
![Page 10: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/10.jpg)
$http meet $q• All $http methods return a promise with 2 paths:
• success: response < 400
• error: response >= 400
![Page 11: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/11.jpg)
$http meet $q - The Code
![Page 12: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/12.jpg)
ngResource & $resource• “The ngResource module provides interaction
support with RESTful services via the $resource service.”
• “A factory which creates a resource object that lets you interact with RESTful server-side data sources.”
![Page 13: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/13.jpg)
The $resource API• url: A parametrized URL template with parameters prefixed by “:”.
• example: $resource(‘http://example.com/resource/:resource_id.:format')
• paramDefaults: Default values for url parameters. These can be overridden in actions methods. If any of the parameter value is a function, it will be executed every time when a param value needs to be obtained for a request (unless the param was overridden).
• { verb: “all”, limit: 10 } => ‘/path/all?limit=10’
• actions: Hash with declaration of custom action that should extend the default set of resource actions.
• Output (default) { get: { method: ‘GET’ }, save: { method: ‘POST’ }, query: { method: ‘GET’, isArray: true }, remove: { method: ‘DELETE’ }, delete: { method: ‘DELETE’ } }
![Page 14: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/14.jpg)
The $resource API - cont.• Returned object can be handled in one of 3 ways:
1. HTTP GET-type requests: Resource.action([params], [success], [error])
2. HTTP non-GET-type requests: Resource.action([params], postData, [success], [error])
3. non-GET instance actions: instance.action([params], [success], [error])
![Page 15: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/15.jpg)
Restangular• ngResource/$resource replacement
• API wrapper around the $http module
• Has its own opinions on API design
• cleaner api but results get transformed into a “restangular” object and occasionally causes unpredictable results
• Recommendation: Don’t use this library unless absolutely necessary.
Martin Gontovnikas
![Page 16: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/16.jpg)
Bring it all together!
HTTP Server
AngularJS API Service
AngularJS Controller
• Define HTTP Server as needed for appropriate JSON API
• Create AngularJS Service whose job is to communicate specifically with that controller
• Good practice to make method names on service same as resource method
• Call appropriate methods on AngularJS controller
![Page 17: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/17.jpg)
![Page 18: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/18.jpg)
![Page 19: ngularJS - files.meetup.com · make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices](https://reader035.vdocuments.us/reader035/viewer/2022081607/5ee33159ad6a402d666d385d/html5/thumbnails/19.jpg)
Additional Resources• Styles Guides:
• John Papa: https://github.com/johnpapa/angular-styleguide
• Todd Motto: https://github.com/toddmotto/angularjs-styleguide
• Tutorials:
• Egghead: https://egghead.io/technologies/angularjs
• Twitter:
• @angularjs, @AngularTutorial, @angularjs_io, @AngularJS_News, @ng_directives