Realtime International Space Station API with AngularJS

It’s my first week at Pusher and, intrigued by Pusher’s realtime Reddit feed, I wanted to have a go at making my first Websockets API. Being a huge fan of AngularJS, I also wanted to see for myself how simple it is to make the framework realtime with Pusher’s new Angular library.

NASA, with space always being one of my great fascinations, seemed a natural place to turn to. Upon visiting NASA’s data bank, I found that Open-Notify.org had crunched NASA’s raw International Space Station location data into a JSON API. Perfect, I thought, as it would be a chance to get some frequently updated data and stream it with the power of Websockets.

Using The API With AngularJS

Firstly, we need to include AngularJS, Pusher, and Pusher-Angular within our HTML file.

markup
1<!-- AngularJS -->
2<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
3
4<!-- pusher-js -->
5<script src="//js.pusher.com/2.2/pusher.min.js"></script>
6
7<!-- pusher-angular -->
8<script src="//cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>
Copy

Now in our javascript we need to set up an Angular application and controller.

javascript
1// Include 'pusher-angular' as a dependency
2angular.module('MyApp', ['pusher-angular'] )
3
4// Then inject the $pusher service into your controller
5
6.controller('MyCtrl', ['$scope', '$pusher', function($scope, $pusher){
7  // code goes here...
8}]);
Copy

Within our controller, setting up our Pusher client to talk to the API should be fairly straightforward. Simply instantiate a new Pusher object (with the key for the ISS API), and pass it into the $pusher service.

javascript
1var client = new Pusher('fa15651bc1ad6c916fc7');
2var pusher = $pusher(client);
Copy

Now let’s have our Pusher client subscribe to the International Space Station channel:

javascript
1var issChannel = pusher.subscribe('iss-channel');
Copy

Now we can log out the data from the ‘new-location’ event triggered by the API in realtime:

javascript
1issChannel.bind('new-location', function(iss){
2  console.log(iss);
3});
Copy

In the console, this will print out:

javascript
1{
2"timestamp":1414058029,
3"message":"success",
4"iss_position":
5  {
6    "latitude":-31.90622125481199,
7    "longitude":-25.751114321984957
8  }
9}
Copy

And there you have it: a live feed of the whereabouts of the International Space Station using Pusher and AngularJS.

Try The Demo And Build Something!

Check out Where Is The ISS? to have a peek at the demo. It tracks the coordinates of the International Space Station on a map, while below you can see NASA’s live stream of shots taken by cameras on the exterior of the station.

Feel more than free to make your own application with this API and let us know when you have. We’d love to see what more you can do with it!

If you’re an Angular-lover and are thinking of combining it with Pusher, head on over to the Pusher-Angular Github Page to find more ways to power your app with realtime.