Angular Heros

by ncapito

HTML

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-resource.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainController">
         <h1>Superheros</h1>

        <a target="_null" href="http://localhost:8000/index.html#/characters">Example</a>

      
        <ul ng-repeat="hero in data">
            <li>{{hero.name}} <a ng-href="{{'http://character-list.herokuapp.com/api/characters/' + hero.id}}" target="_null">Details</a>
            </li>
        </ul>
    
    
       <div class='example'> <pre class='codeBlock' ng-if="first">{{first|json}}</pre>  </div>
       <div class='example'> <pre class='codeBlock' ng-if="data">{{data|json}}</pre>   </div>
           
    </div>
    <div>

CSS

.codeBlock {
    height: 300px;
    overflow: scroll;
}

JavaScript

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

app.controller('MainController', ['$scope', '$http', function ($scope, $http) {
    $scope.log = function (item) {
        console.log(item);
    }
    $scope.title = 'Heros';
    $http.get('http://character-list.herokuapp.com/api/characters').success(function (data) {
        $scope.data = data && data.data && data.data.results;
        $scope.first = $http.get('http://character-list.herokuapp.com/api/characters/' + $scope.data[0].id).success(function (data) {
            $scope.first = data && data.data.results[0];
        });
    }).error(function () {
        console.log('FAILURE');
    });


}]);