Networking
We access remote services using the $http service, which we can inject into our controller.
var url = "http://www.mycats.com/api/cats";
$http.get(url);This gives us a Promise object, which we can chain callbacks onto. In the callback, we generally push the response in to $scope, then allow the template to take over.
$http.get(url).then(function (response) {
$scope.cats = response.data;
});Once your data is in scope, a digest will fire and your template will automatically update to display it.
Exercise - update the Henchmen to pull from a JSON feed
- Have a look through the http>
- Refactor your repeat and filter exercise to pull data from a JSON file via AJAX. Remember, your JSON must be well formed to work which means double quotes around all the keys.
JSONP
JSONP is a hack which lets us make cross site AJAX requests. We use the $http object to make a request. We use the .then to respond when an AJAX request completes.
angular
.module("app", [])
.controller("ajaxController", function ($scope, $http) {
var url = "http://example.com/cats?callback=JSON_CALLBACK";
$http.jsonp(url).then(function (response) {
$scope.cats = response.data;
});
});Choose one of the following exercises:
Flickr Exercise
The Flickr JSONP endpoint looks like this:
Pull the Flickr feed from the Internet and display the images.
Extension
Allow the user to search for a tag.
The Weather - Exercise
You can pull in data from all over the internet. Here’s the JSONP url for Open Weather Map:
http://api.openweathermap.org/data/2.5/weather?q=London,uk&callback=JSON_CALLBACK
Use Open Weather Map to get the weather for a specific location
Extension
Allow the user to search for a city. You can find the Open Weather Map API here: