Last active
December 25, 2015 10:39
-
-
Save Sch3lp/6963707 to your computer and use it in GitHub Desktop.
The twitchServices module has a method that allows a caller to get all the Streams.
The service uses Angulars Promises: $q.defer(); The thing that I got stuck on was the $rootScope.$apply() wrapper block. If you don't do this then Angular's models won't be updated automagically. Another caveat was the fact that Twitch.SDK's 'streams' method retu…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| angular.module('twitchSmartTvApp', ['twitchServices']) | |
| .config(function ($routeProvider) { | |
| $routeProvider | |
| .when('/', { | |
| templateUrl: 'main.html', | |
| controller: function ($scope, Streams) { | |
| $scope.streams = Streams.getAll(); | |
| } | |
| }) | |
| .otherwise({ | |
| redirectTo: '/' | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="styles/bootstrap.css"> | |
| <link rel="stylesheet" href="styles/main.css"> | |
| </head> | |
| <body ng-app="twitchSmartTvApp"> | |
| <!-- jQuery needs to be loaded first, because the Twitch.init method requires it --> | |
| <script src="jquery.js"></script> | |
| <script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script> | |
| <script> | |
| Twitch.init({clientId: 'yourClientId', | |
| version: 'v2'}, | |
| function(error, status) { | |
| if (error) { | |
| console.log(error); | |
| } | |
| }); | |
| </script> | |
| <script src="angular.js"></script> | |
| <script src="angular-resource.js"></script> | |
| <script src="angular-cookies.js"></script> | |
| <script src="angular-sanitize.js"></script> | |
| <!-- your services and controllers --> | |
| <script src="scripts/app.js"></script> | |
| <script src="scripts/services/twitchServices.js"></script> | |
| <div class="container" ng-view></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="hero-unit"> | |
| <h1>Twitch Streams</h1> | |
| <p>Here are all the Live Streams:</p> | |
| <ul> | |
| <li ng-repeat="stream in streams">{{stream.channel.display_name}}</li> | |
| </ul> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('twitchServices', []) | |
| .factory('Streams', function ($q, $rootScope){ | |
| var getAll = function() { | |
| /* Got this by watching this youtube video: http://www.youtube.com/watch?v=P6KITGRQujQ */ | |
| /* Other super helpful link: http://stackoverflow.com/questions/15604196/promises-in-angularjs-and-where-to-use-them */ | |
| var deferred = $q.defer(); | |
| var twitchCallBack = function(error, data) { | |
| if (error === null){ | |
| /* | |
| * Wrap in $apply so when Angulars model requests an update, it will apply the result of the async twitch call with the resolve on the deferred object. | |
| * Just assigning the promise (in the controller) won't update the model by itself, since we're performing this callback outside of Angulars context. | |
| * See: http://stackoverflow.com/questions/13962334/can-i-use-jquery-ajax-with-angular-js-promise-api | |
| */ | |
| $rootScope.$apply(function(){ | |
| /* need to suffix with .streams because original object looks like this: | |
| { | |
| streams: [{channel: xxx, user: xxx, name: xxx, ...}], | |
| _links: {} | |
| } | |
| See: https://github.com/justintv/Twitch-API/blob/master/v2_resources/streams.md#example-response-1 | |
| */ | |
| deferred.resolve(data.streams); | |
| }); | |
| } else { | |
| // same deal with .reject, if we don't wrap it in an $apply, Angulars errorhandlers will not be triggered | |
| $rootScope.$apply(function(){ | |
| deferred.reject(error); | |
| }); | |
| } | |
| }; | |
| // internally uses $ajax({}) to perform asynchronous calls to the Twitch REST API | |
| Twitch.api({method: 'streams', params: { game:'StarCraft II: Heart of the Swarm', limit:5}}, twitchCallBack); | |
| return deferred.promise; | |
| }; | |
| return { getAll: getAll } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment