Getting Channel Information Using AngularJS using $HTTP and JSONP

API
3

Hello,

Yes, the $http and/or $resource is quite hard to understand with AngularJS, here is a solution for $http:

index.html:

<!DOCTYPE html>
<html ng-app ="myApp">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
 
<body ng-controller="MainController">
  {{channel.streams[0]._id}}
  {{channel.streams[0].game}}
</body>

</html>

script.js

var myApp = angular.module('myApp', []);

myApp.controller('MainController', function($scope, $http) {
  
    var url = "https://api.twitch.tv/kraken/streams?channel=lirik&callback=JSON_CALLBACK";
    $http.defaults.headers.common["X-Custom-Header"] = "Angular.js"
    $http.jsonp(url).success(function(data) {
      $scope.channel = data;
    }).error(function(data) {
       $scope.channel = {}
    });
});

Working example: http://plnkr.co/edit/6xKvNz7NojV3gyJyYlpf?p=preview

Have fun,
Schmoopiie!