Page 21 - MSDN Magazine, October 2017

multicolor
hit-
highlighting
easy
options
®
necessary to convert the returned object for use as a Promise. Note that to make the code in Figure 3 work, one more import is nec- essary. To bring in the toPromise method, make sure to add the following code to the top of the file:
import 'rxjs/add/operator/toPromise';
It may seem odd that the SpeakerService is “transforming” the returned JSON from the API into a local Speaker object, but this is actually a fairly common task. The JSON published by an API is often not quite the right “shape” for use by the UI, and so it needs to be massaged into the local concept of what that type should look like. In this particular case, I’m assuming that the service is returning the speakers with uppercase field names (less unusual than you might think), and taking the additional step to transform the “Votes” field into an Upvote object. While some “full stack” systems will try to insist there’s one schema definition that can be shared across both client and server, it’s generally safer to assume that there isn’t, and perform “adjustments” to the data received to transform it into something the UI finds more palatable.
In some cases, that “adjustment” consists of leaving some amount of data on the floor, or “flattening” it for easier use, or some other transformation. For example, if the server sends back distinct “Speaker” and “Talk” objects, the SpeakerService may wish to “flatten” that into the single Speaker object that I’m using, collect- ing all of the votes for each talk in the speaker’s repertoire into a single scalar value.
Go ahead and save. Assuming you have a server running on localhost at port 3000, you should see everything work as it did before the flip to using HTTP. (If you don’t have a server running on localhost, feel free to change the URL in the SpeakerService to http://msdn-mean.azurewebsites.net/, which is where I’ve parked the newly refurbished Speaker API. Feel free to browse the com- plete set of API endpoints using the “/explorer” URL there, if you wish—that is a Swagger-generated UI, which comes out of the box when working with Loopback.)
Wrapping Up
The HttpModule (and its corresponding service object, HTTP) cer- tainly has support for PUTs and POSTs and all the other goodness that HTTP offers, but those will be addressed once I’ve added the ability to edit and add new Speakers in the Angular app. For that matter, I still need to flesh out this front end a bit more, by showing a list of all the speakers and then allowing the user to drill down into a specific one—the classic “master-detail” approach that so many applications use (and abuse). To do that, I’ll need to talk about how Angular manages “routing” (to move between components, as if they were “pages” in the application) and “forms” (for doing data entry). But all that has to wait for next time. Until then ... Happy coding!n
Ted Neward is a Seattle-based polytechnology consultant, speaker and men- tor, currently working as the director of Developer Relations at Smartsheet.com. He has written a ton of articles, authored and co-authored a dozen books, and works all over the world. Reach him at ted@tedneward.com or read his blog at blogs.tedneward.com.
ThaNks to the following technical expert who reviewed this article: James Bender
msdnmagazine.com
Instantly Search Terabytes of Data
across a desktop, network, Internet or Intranet site with dtSearch enterprise and developer products
Over 25 search features, with
dtSearch’s document filters support popular file types, emails with multilevel attachments, databases, web data
Developers:
• APIs for .NET, Java and C++
• SDKs for Windows, UWP, Linux, Mac and Android
• See dtSearch.com for articles on faceted search, advanced data classification, working with SQL, NoSQL & other DBs, MS Azure, etc.
Visit dtSearch.com for
• hundreds of reviews and case studies • fully-functional evaluations
The Smart Choice for Text Retrieval® since 1991
dtSearch.com 1-800-IT-FINDS