Prerequisites for Using Data APIs
Most APIs you might leverage in a Single Page Application (SPA) will require you to sign up, and possibly even go through some approval process, in order to consume their data. For the purposes of experimentation, it's good to stick with "open" data APIs, many of which are provided by various government agencies, non-profit organizations, and various other outlets. Many for-profit companies offer very liberal API usage to developers, while others restrict their API access to approved partners.
Open Weather Map
For the purposes of this book, I will leverage the data available from OpenWeatherMap.org (OWM). This is a service run by a private company, but with very liberal usage policies. You can learn more about OpenWeatherMap.org on their About Us page. (Please note: Neither I nor this book is in any way affiliated with OWM. For the purposes of the work we will do here, you may substitute any other REST API service that will return JSON. There are a lot of those.)
In order to use OWM's API, you must register for an account. When you register for an account, you will be given an API key, which you can find on your "My Home" page after you have logged in. (Click the "Hello" link in the upper right of the site if you can't find your "My Home" page.
The My Home page looks like this (please note the API Key field):
Now that you have your API key, you are ready to continue with the work in this chapter using the OWM API.
Exploring the API
Whenever I begin using a new data API, I like to spend a little time exploring the API documentation and trying requests using an API browser tool like Postman for Google's Chrome browser.
Postman allows you to construct HTTP requests to any API. You can set necessary headers, query parameters, form data, and more. Results are clearly displayed so you can truly begin to understand the shape of the data that comes back from the API. Each API will deliver a different type of data object, and all the attributes contained in these responses become available to you inside your AngularJS app once you set up your data models properly.
That means you can use an API browser tool to get a clear view of what information exists in the data coming back from your API service. Since the API data objects are translated directly into your AngularJS models, you can easily see how to access the specific information you require for your purposes.
These tools also help you form proper API requests. If your request is not properly formed, then you will not get the data you need back from the API service. Luckily, AngularJS makes it easy to create base request templates so you do not need to constantly be writing and rewriting requests, but it can still be tricky to work out how to form your request in the first place. A good API browser tool will help you formulate correct requests and will allow you to know exactly what you are getting back. You can even use it to help test edge cases and learn how the API responds if, for example, you send some data value it does not expect.
The Postman Documentation site has a lot of useful information, tutorials, and guides for using Postman to explore API services. You are encouraged to read up on how to use this tool, or find a similar tool you prefer and use that one. It is very essential to have a way to view the data coming into your app, and to test your app's API queries, apart from your custom Javascript code.
We will be using the OWM "current weather" feature today. You can read more about how this feature works on the current weather documentation page. More information about how the OWM API works can be accessed from their API documentation homepage: http://openweathermap.org/api.
You will want to review those pages. Try using Postman to explore the current weather API endpoint. Plug this URL into Postman and do a GET query to see results like those shown above:
http://api.openweathermap.org/data/2.5/weather?q=Seattle,us&units=imperial
(Don't forget that you'll need to set your API key using a query string parameter. Other API services will require you to configure Postman to authenticate in other ways, so pay attention to those requirements if you're using a different API.)
Try changing the units to "metric" or alter the location to see results for a different city. You should be able to see clear changes in the data returned. Can you make the API send results for Paris, France? How about Paris, Texas? Keep exploring until you feel like you have a basic understanding of how this API works.
Using other APIs
You can use the patterns described in this book to use any other REST API that serves JSON results. There are many, many APIs that fit that description. Some APIs require you to do more arduous authentication or to have your app approved before you will be granted developer privileges. Other APIs have steep charges for using them, and although you may be able to develop against them reasonably it would be prohibitively expensive to release a website using that API. These considerations and more should inform your decision as you look for APIs.
As you look for APIs to use in your projects, some of these resources may help: