I am trying to access my Github information using Github's API. I can see the correct information when I log my http request, but for some reason it is not showing up on the page. There are no errors being thrown, but the requested data is not displaying (The partial is showing up, but not the data that is being requested).
Service:
myApp.factory('githubApi', ['$http',
function($http) {
//Setting up a promise to either return or not return a user's github information.
return {
async: function() {
return $http.get('https://api.github.com/users/joshspears3');
}
}
}
]);
Controller:
myApp.controller('githubCtrl', [ 'githubApi', '$scope',
function(githubApi, $scope){
$scope.data = githubApi.async();
}
]);
Directive:
myApp.directive('githubRequest', [
function() {
return {
scope: {},
restrict: 'E',
controller: 'githubCtrl',
templateUrl: 'public/views/partials/github-request.html'
}
}
]);
github-request.html (partial):
<p class="component-example-header">Creating a service. Grabbing information based on the github API.</p>
<div>
Making a $http request to grab my personal Github information.
<p>Avatar:</p>
<img width="20%"src="{{data.avatar_url}}" alt="" />
<p>Username: {{data.login}}</p>
<p>Followers: {{data.followers}}, Following: {{data.following}}</p>
</div>
Index.html:
<div>
<global-header></global-header>
<div ui-view></div>
<github-request></github-request>
</div>